Elementin identifioiminen

Ohjelmoinnissa tarvitsemme yleensä viitettä juuri tiettyyn elementtiin. Tämä tapahtuu yleensä parametrillä id, esimerkiksi:

<input type="button" value="Klikkaa nyt" id="nappi1" />

tekee napin ja identifioi sen nappi1:si.

Identifioivassa nimessä ei saa olla ääkkösiä, erikoismerkkejä, eikä välilyöntejä. Se pitää alkaa kirjaimella.

Samalla lailla voimme identifioida minkä tahansa elementin, kuten kuvan:

Elementtiin viittaaminen

Identifioivan id:n liittäminen ei vaikuta mitenkään elementin näkyvyyteen. Se antaa vain keinon viita juuri ko. elementtiin ohjelmassa.

Yllä sivun kuvaan liitetään kaksi tapahtumafunktiota onMouseover ja onMouseout. Kumpaankin on liitetty funktio, mikä hakee kuvan id:n perusteella käskyllä

document.getElementById("kuva1")

jonka jälkeen kuvan src-ominaisuutta voidaan vaihtaa. Toisinsanoen funktiot vaihtavat kuvaa lennossa sen mukaan, onko hiiren osoitin kuvan päällä vai ei.

Tehtävä 1:

Muokkaa kuvaesimerkkiä siten, että käytät siinä itse valitsemiasi kuvia ja lisää siihen funktio, mikä näyttää kolmannen kuvan, jos käyttäjä pitää hiiren napin alhaalla.