Egér a hivatkozás felett 909.
Ha az egérrel, bármelyik hivatkozás fölé állunk, megjelenik egy üzenet a felhasználó felé.
A következő hivatkozások, azaz linkek, bemutató jelleggel készültek, ezért nem visznek másik weboldalra, ha rákattintunk valamelyikre.
Kettő példa kerül bemutatásra, hogy lássuk a különbséget:
- Első példában JavaScript programmal jelenítjük meg az üzenetet.
- Második példában, normál webes formátumban jelenik meg az üzenet.
Vigyük az egeret, a következő hivatkozások fölé, és programunk megjelenít egy tájékoztató vagy figyelmeztető szöveget, de lehetne egy rövid leírás is azon weboldalról, melyre a linkre történő kattintás után jutunk.
Első példa:
A leírást, JavaSript programunk, jelenleg egy h2-es cimsorban jeleníti meg. De mindenki, tetszőleges helyen jelenítheti meg!
Előnye:
- addig áll rendelkezésre, hogy a megjelenő üzenetet elolvassuk, még az egér a hivatkozás felett áll, azaz korlátlan ideig.
- A szöveg megjelenési helyét, és annak stílusát mi határozzuk meg.
Hátránya:
- kell egy külön program, az üzenet megjelenítéséhez.
Második példa:
Normál webes formátum, a link sorban, a title után beírt szöveg jelenik meg.
- Előnye: nem kell külön program az üzenet megjelenítéséhez.
- Hátránya: kb. 5 másodperc áll rendelkezésre, hogy a megjelenő üzenetet elolvassuk, és a megjelenési formába beleszólni nem tudunk.
Első példa, programjának megírása
A JavaScript meghivó utasítást a dokumentum végén helyezzük el!
Megjegyzés:
Ha szöveges hivatkozás helyett, képet helyezünk el, az id azonosítót a kép címkéi közé kell elhelyezni.
Példa: Az Alma nevű linket, képpel helyettesítjük.
<a href="alma.html" > <img src="kep15x15.jpg" width="15" height="15" id="link3" border="0" /> </a>
XHTML fájlban
<body>
<ul>
<li><a href="retek.html" id="link1"> A piros retek</a></li>
<li><a href="dio.html" id="link2"> A dió </a></li>
<li><a href="alma.html" id="link3">Alma </a></li>
</ul>
<h2 id="linkuzenet"> </h2>
<script language="JavaScript" type="text/javascript" src="link.js"></script>
</body>
JavaScript link.js programunk, külön js fájlban
// Készítünk egy üzenettörlő függvényt, arra az esetre, ha az egérmutatója elhagyja a hivatkozás, azaz link területét.
function uzenettorles ( ) {
d = document. getElementById ("linkuzenet");
d.innerHTML = " ";
}
// Készítünk egy egérmutatót figyelő függvényt, mely figyeli azon eseményt (event), mikor ér az egérmutatója a hivatkozás, azaz link területe fölé, és a window.event eseményfigyelőt hozzárendeljuk egy változóhoz, mely a következő elnevezést kapja "e"
function hover (e) {
if (!e) var e = window.event;
// Megállapítása annak, hogy melyik hivatkozás, azaz link elem fölé húztuk az egérmutatót.
hivatkozas = (e.target) ? e.target.id : e.srcElement.id;
// Azon link és a hozzátartozó üzenet kiválasztása, mely felett az egér áll.
if (hivatkozas=="link1") uzenet = "Tetszőleges szöveget, ide írjuk. ";
else if (hivatkozas=="link2") uzenet = "Tetszőleges szöveget, ide írjuk.";
else if (hivatkozas=="link3") uzenet = "Tetszőleges szöveget, ide írjuk. ";
// A leírás megjelenítése azon területen, melynek kezdő címkéje az id="linkuzenet" egyedi azonosítóval rendelkezik.
d = document.getElementById ("linkuzenet");
d.innerHTML = uzenet;
}
// Az eseménykezelők, azaz hivatkozások beállítása.
// Soreleji változónév tetszőleges lehet, azaz egyértelmű legyen számunkra, melyik hivatkozásra vonatkozik.
reteklink = document.getElementById ("link1");
reteklink.onmouseover=hover;
reteklink.onmouseout= uzenettorles;
dio = document.getElementById ("link2");
dio.onmouseover=hover;
dio.onmouseout= uzenettorles;
alma = document.getElementById ("link3");
alma.onmouseover=hover;
alma.onmouseout= uzenettorles;
Ismertető
Az onMouseOver akkor fut le, ha az egérmutató az objektum, azaz hivatkozás fölé áll.
A hover:
A weblapkészítésnél elkészített hivatkozásoknál CSS, azaz stíluslapon történő meghatározásnál, használjuk az a:hover{.......} tulajdonság meghatározást, azaz mi történjen, ha az egérmutató a hivatkozás fölött áll.
Ezt kihasználva, az onMouseOver - hez rendelt változó ezt az elnevezést (hover) kapja, hogy egyértelmű legyen számunkra, milyen esemény történik.
De természetesen, mindenki tetszőleges elnevezést adhat helyette. Például: egeralinkfelett, stb.
A target:
Az adott programból származó eredmények megjelenítésére szolgáló ablakot (láthatatlan) határoz meg,
weboldalunk azon helyén, ahol a megfelelő egyedi azonosítóval rendelkezik az adott jelölőelem.
Ez lehet egy űrlapelem name azonosítója, vagy egy szövegrészt jelölő címke id azonosítója.
Az event.srcElement: Azon objektum vagy hivatkozás, azaz link, ahol az esemény bekövetkezett.
Ezen objektumot, a name vagy id azonosító alapján azonosítja be, azaz határozza meg.
Egy adott eseményt az event objektum tárol, mely több tulajdonsággal is rendelkezik.
Tulajdonság: A weboldalon történő, éppen aktuális esemény.
Például: lenyomott egérgomb, felengedett egérgomb, hól következett be az esemény, stb.
Az esemény bekövetkeztét, Internet Explorer az srcElement tulajdonsággal, Mozilla a target tulajdonsággal határozza meg, ezért programunkban mindkét tulajdonságot szerepeltetni kell.
Ugyanis, nem tudhatjuk előre, hogy a weboldalunkat felhasználók, melyik böngészőtípust alkalmazzák.
Ha mindkét tulajdonságtípust feltüntetjük, akkor készítettünk egy böngésző független eseményfigyelő programot.
Az onMouseOut akkor fut le, ha az egérmutató elhagyja az objektum, azaz hivatkozás körvonalait