Ha nemcsak egy képre akarsz kattintatni, hanem szeretnéd felhasználod tudtára adni, hogy tényleg megnyomta a gombot, akkor
az onMouseOver(), onMouseOut(), onMouseDown() illetve onMouseUp() metodusokat kell használnod.
onMouseOver() & onMouseOut() ->
pl.: <a href= "cel.html" target="_blank" onMouseOver= "if (document.images) document.home.src= 'valami_kiszinezve.jpg'" onMouseOut= "if (document.images) document.home.src= valami.jpg'">
<img src= "valami.jpg" name="home" border=0></a>
Kezdésként az valami.jpg lászik a képernyön. Ha az egeret fölévisszük, akkor a kép átrajzolódik
valami_kiszinezve.jpg-vé, majd ha lemegyünk a képröl úrja valami.jpg lesz látható.
Figyelj a pirossal kiemelt részre, ugyanazok legyenek a nevek.
Eredmény:
onMouseDown() & onMouseUp() ->
pl.: <a href="cel.html" target="_blank" name="kep1" style="position:relative;left:0;top:0" onmousedown="mozgat_kep1()" onmouseup="mozgat_vissza_kep1()" onmousemove="mozgat_vissza_kep1()">
<img src="valami.jpg" border=0<></a>
Itt már kicsit rázósabb a helyzet, kell egy script segítségül (figyelj az <a href> nevének megadásakor, hogy a script-ben is ugyanazt a nevet kell használnod).
- Amikor a kép fölött lenyomjuk az egeret, akkor a mozgat() fügvény meghívódik, ami
3 képponttal jobbra, illetve 3 képponttal lejjebb rajzolja a képet.
- Amikor felengedjük az egérgombot, akkor a mozgat_vissza() fügvény hívódik meg, ami
visszarajzolja a képünket a 0,0-ás pozicióba.
- A lilával kiemelt részre azért van szükség, mert ha lenyomott gomb melett elmozdul az egér, akkor az onMouseDown() már nem aktivizálódik mikor elendeded az egérgombot, ezért ilyenkor is
vissza kell rajzoltatni a képet a helyére.
Eredmény:
És végül a kettöt összeolvasztva:
pl.:<a href="cel.html" target="_blank" name="kep1" style="position:relative;left:0;top:0" onMouseOver= "if (document.images) document.home.src= 'valami_kiszinezve.jpg'" onMouseOut= "if (document.images) document.home.src= valami.jpg'" onmousedown="mozgat_kep1()" onmouseup="mozgat_vissza_kep1()" onmousemove="mozgat_vissza_kep1()">
<img src="valami.jpg" name="home" border=0></a>
Eredmény:
Install:
Másold ki a scriptet, tedd a HEAD-be, a többit olvasd fentebb.
