Tulos

Aseta sivun taustakuva klikkaamalla jotain vaihtoehtoa:

oletusasetus

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
//<![CDATA[
/*
 * Tunnus:	    Taustaefekti; vaihdettava taustakuva
 * Tekijä:	    Osmo Saarikumpu
 * Tehty:           2004-09-13
 * Tekijänoikeudet: Vapaasti käytettävissä
 */

/*
Mikäli tahdot sivulle oletustaustakuvan,
niin määrittele sen polku koodin kolmannessa
rivissä, kuten viidennessä rivissä on tehty.

Mikäli tahdot oletustaustakuvan latautuvan
heti, niin määrittele se BODY-elementin
BACKGROUND-attribuutilla.
*/

// Kuvien määrittely alkaa:
if(document.images) {
Oletustaustakuva = new Image();
Oletustaustakuva.src = "";
Kuva1 = new Image();
Kuva1.src = "../kuvat/taus1.gif";
Kuva2 = new Image();
Kuva2.src = "../kuvat/taus2.gif";
 }
// Lisää, poista, muokkaa yo. logiikan mukaan.

// Luodaan kuvanvaihdon suorittava funktio, 
// jota sitten kutsutaan yleisellä OnClick-tapahtuma-attribuutilla:

function VaihdaTaustakuva(KuvanNimi) {
document.body.background = eval(KuvanNimi + ".src");
}
//]]>
</script>

Tämä tulee BODY-osastoon

<table width="150" border="1">
<tr><td>
<img width="150" height="20"
 src="../kuvat/taus1.gif"
 onclick="if(document.images) {VaihdaTaustakuva('Kuva1')}"
 alt="Vaihtoehtoinen teksti kuvalle." />
</td></tr>
<tr><td>
<img width="150" height="20"
 src="../kuvat/taus2.gif"
 onclick="if(document.images) {VaihdaTaustakuva('Kuva2')}"
 alt="Vaihtoehtoinen teksti kuvalle." />
</td></tr>
<tr><td
 onclick="if(document.images) {VaihdaTaustakuva('Oletustaustakuva')}">
oletusasetus
</td></tr>
</table>