Keskustelu: Nettisivujen teko: Javascptillä solun taustakuva-animaatio

Aku2 [20.10.2010 11:47:46]

Tarkoituksena on saada solun taustaan kuva-animaatio aikaiseksi.

Allaoleva scripti toimii jos käytän body elementin taustakuvaa, mutta en vaan saa jostain syystä tätä toimimaan solun taustana.

<script lang="Javascript1.2">
var bgslides=new Array()
bgslides[0]="kuvat/1.jpg"
bgslides[1]="kuvat/2.jpg"
var speed=3000

var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.tdtausta.background=processed[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')

CSS tietenkin luotu solun taustalle.

Onko vinkkejä mikä tuossa mättää?

tsuriga [20.10.2010 13:41:29]

Aika monikin asia, käytetty koodi on erittäin vanhahtavaa.

-Tyyppi: text/javascript (tai oikeammin application/javascript, mutta IE ei tue). Language-attribuuttia ei tarvita.
-Haetaan viittaukset elementteihin sen sijaan, että oletettaisiin niiden löytyvän paikasta x.
-Nopeuden ja semanttisuuden vuoksi annetaan onloadille mieluummin anonyymi funktio kuin objektiviittaus, joka evaluoi merkkijonona annetun koodin.
-SetIntervalille annetaan mieluummin funktioviittaus, ei merkkijonoa. Syynä taas se evaluointi, joka on resurssisyöppöä touhua.

Tässä toimiva versio. Sanaa reference on käytetty kommenteissa yleistarkoituksellisesti. Demo.

JavaScript

/* coding=utf-8 */

// Animation speed
var speed = 3000;
// Animation frames
var frames = ['1.jpg', '2.jpg'];

// Reference to cell whose background we change
var td;
// Current frame number
var frame = -1;

window.onload = function() {
    // Preload images
    var img;
    for (var i = 0; i < frames.length; i++) {
        img = new Image();
        img.src = 'kuvat/' + frames[i];
    }

    // Fetch cell reference
    td = document.getElementById('wbg');

    // Begin animation
    setInterval(slideback, speed);
}

function slideback() {
    if (++frame === frames.length) {
        frame = 0;
    }

    td.style.backgroundImage = 'url(kuvat/' + frames[frame] + ')';
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Change table cell background</title>
  <script type="text/javascript" src="bgchanger.js"></script>
 </head>
 <body>
  <table>
   <tr>
    <td id="wbg" name="wbg">Hello World</td>
   </tr>
  </table>
 </body>
</html>

Aku2 [20.10.2010 16:04:06]

Ok.
Löysin käyttötarkoitukseeni paremmin toimivan scrptin (vaikkakin tarvetta tuolle ylläolevallekin on.) Eli allaoleva olisi tarkoitus saada myöskin toimimaan solun taustana eikä kuvavaihtona.
Tässä uudessa on kuitenkin ongelmana blendaus, joka ilmeisesti on myöskin vanhentunutta koodia.
Toimii siis IE:ssä kuten pitääkin, mutta ei Firefoxissa.

<script language="JavaScript1.2">

function reapply(){
setTimeout("slideit()",10000)
return true
}
window.onerror=reapply
</script>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="kuvat/1.jpg"
var image2=new Image()
image2.src="kuvat/2.jpg"
//-->
</script>
    <script>
<!--
////change number of images below
var number_of_images=2
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.blendTrans.play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+10000)
else
setTimeout("slideit()",speed*1000)
}

//-->
</script>

<body onLoad="slideit()">

<img src="kuvat/1.jpg" name="slide" border=0 style="filter:blendTrans(duration=5)">

Eli onko korvaajaa jollekin osalle, että sen saisi toimimaan myös Firefoxilla ja miksei muillakin selaimilla?
Itse olen testannut tuota vasta IE:llä ja Firefoxilla.

tsuriga [20.10.2010 20:06:46]

Filtterit ovat IE-only taikatemppu. Yksinkertaisella parin rivin muutoksella tuo ei korjaudu, suosittelisin koko skriptin kirjoittamista uusiksi viime viestissä mainittujen asioiden takia. Opettele JavaScriptiä ja käytä hommaan jotain valmista JS-kirjastoa, vaikkapa jQueryä tai scriptaculousia.

Aku2 [21.10.2010 10:37:06]

Jeps. Tuolla jQuerylla näytti löytyvän sellainen esimerkki mitä täyttää tarpeeni.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku