e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Miškini dogodki

Koda: 
<script type="text/javascript">

function dol()
{
document.getElementById("slika").src="slike/xfoto2.jpg"
window.status="Mi\u0161kin gumbek JE pritisnjen."
document.getElementById("napis").firstChild.nodeValue=
→ "Mi\u0161kin gumbek JE pritisnjen."
}

function gor()
{
document.getElementById("slika").src="slike/xfoto3.jpg"
window.status="Mi\u0161kin gumbek NI pritisnjen."
document.getElementById("napis").firstChild.nodeValue=
→ "Mi\u0161kin gumbek NI pritisnjen."
}

function ven()
{
document.getElementById("slika").src="slike/xfoto1.jpg"
window.status="Postavi mi\u0161ko nad sliko."
document.getElementById("napis").firstChild.nodeValue=
→ "Postavi mi\u0161ko nad sliko."
}

function nad()
{
document.getElementById("slika").src="slike/xfoto0.jpg"
window.status="Pritisni na mi\u0161kin gumbek in ga dr\u017Ei!"
document.getElementById("napis").firstChild.nodeValue=
→ "Pritisni na mi\u0161kin gumbek in ga dr\u017Ei!"
}

</script>

<p id="napis">Postavi miško nad sliko.</p>
<img alt="slika" id="slika" onmousedown="dol()"
→ onmouseup="gor()" onmouseout="ven()"
→ onmouseover="nad()" src="slike/xfoto3.jpg" />
Izgled v
brskalniku:

Postavi miško nad sliko.

slika

Razlaga:

V podanem primeru imam 4 različne funkcije dol, gor(), ven() nad(). Vsaka glede na dogodek prikaže določeno sliko.

Funkcije predmetu window spremenijo lastnost status, to je napis v statusni vrstici.Sprmeni se tudi vsebina elementa (besedilo), ki ga v dokumentu HTML poiščemo s pomočjo id in sicer s postopkom document.getElementById("napis"). Tudi slika se pišče s postopkom document.getElementById("slika"), spremeni pa se ji naslov izvora url, ki je določen z lastnostjo src.

Funkcije su pokličejo ob naslednjih dogodkih:

  • če se postavimo z miško nad sliko, se pokliče funkcija nad()
  • če pritisnemo miškin gumbek in ga še ne spustimo, se pokliče funkcija dol()
  • če spustimo miškin gumbek, se pokliče funkcija gor()
  • če z miško zapustimo področje nad sliko, se pokliče funkcija ven()

gor Gor     e-gradiva     JavaScript     Primeri     Dogodki

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart