Weblap Hová jutunk?

Eseménykezelés tesztlapokhoz. 959

Tesztlapokhoz, kérdés - válasz efekt.

Kérdésre a választ megkapjuk, ha az egérrel, bármelyik kérdés fölé állunk, és kattintunk.

Az első kettő link, nem rendelkezik href=" " meghatározással, a többi, rendelkezik href=" " meghatározással.
A href hiánya, nem befolyásolja müködésüket.
De, figyeljük meg kurzor megjelenését, ha egeret a szöveg fölé mozgatjuk. Felfelé mutató kézfej, csak a href meghatározással rendelkező elemeknél van.

1. Kérdés: Minek a vegyjele, a H2O

2. Kérdés: Mennyi az eredménye, 72

3. Kérdés: Minek a jele, a m2

4. Kérdés: Minek a jele, a m3

5. Kérdés: Miért nevezzük a felhőt, felhőnek?

6. Kérdés: Hól áramlik mindig felfelé a levegő?

7. Kérdés: Mennyit lép a veréb, egy méteren?

8. Kérdés: 2*2 mikor lesz = 5

9. Kérdés: Egy tucat, miért párosszám?

10. Kérdés. Melyik számsort nem tudjuk leírni, csak jelőlni?

HTML fájlban, JavasScript meghivó utasítást,
a kérdés linkek után, vagy a dokumentum végén helyezzük el.


A HTML fájl:


<html>
<head>
<title>Tesztlapokhoz, kérdés - válasz efekt. 910</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<a id="link1">1. Kérdés: Minek a vegyjele, a H<sub>2</sub>O </a> <div id="d1" class="valasz"></div> <br>
<a id="link2">2. Kérdés: Mennyi az eredménye, 7<sup>2</sup> </a> <div id="d2" class="valasz"></div> <br>
<a href="#.html" id="link3">3. Kérdés: Minek a jele, a m<sup>2</sup> </a> <div id="d3" class="valasz"></div> <br>
<a href="#.html" id="link4">4. Kérdés: Minek a jele, a m<sup>3</sup> </a> <div id="d4" class="valasz"></div> <br>
<a href="#.html" id="link5">5. Kérdés: Miért nevezzük a felhőt, felhőnek?</a> <div id="d5" class="valasz"></div> <br>
<a href="#.html" id="link6">6. Kérdés: Hól áramlik mindig felfelé a levegő?</a> <div id="d6" class="valasz"></div> <br>
<a href="#.html" id="link7">7. Kérdés: Mennyit lép a veréb, egy méteren?</a> <div id="d7" class="valasz"></div> <br>
<a href="#.html" id="link8">8. Kérdés: 2*2 mikor lesz = 5 </a> <div id="d8" class="valasz"></div> <br>
<a href="#.html" id="link9">9. Kérdés: Egy tucat, miért párosszám? </a> <div id="d9" class="valasz"></div> <br>
<a href="#.html" id="link10">10. Kérdés. Melyik számsort nem tudjuk leírni, csak jelőlni? </a> <div id="d10" class="valasz"></div> <br>


<script language="JavaScript" type="text/javascript" src="tesztlap.js"></script>

</div>
</body>
</html>

A stilus.css fájl:

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc;} 
#container {width: 900px; margin-top: 5px; margin-right: auto; margin-left: auto;} 
.valasz {width: 350px;  margin-left: 100px; padding:0.1px; font-size: 14px;}
a{text-decoration: none; color: gray;}
a:hover{color: black;}


A tesztlap.js fájl:

// Hivatkozásokhoz tartozó tájékoztató szöveg törlése.

function uzenettorles() {
document.getElementById ("d1").innerHTML = " ";
document.getElementById ("d2").innerHTML = " ";
document.getElementById ("d3").innerHTML = " ";
document.getElementById ("d4").innerHTML = " ";
document.getElementById ("d5").innerHTML = " ";
document.getElementById ("d6").innerHTML = " ";
document.getElementById ("d7").innerHTML = " ";
document.getElementById ("d8").innerHTML = " ";
document.getElementById ("d9").innerHTML = " ";
document.getElementById ("d10").innerHTML = " ";
}
// ---------------------------------------------------------------------------

function hover(e){
if (!e) var e = window.event;
// Melyik id azonosítóval rendelkező elem történt onclick esemény.
hivatkozas = (e.target) ? e.target.id : e.srcElement.id;

//A hivatkozasi link kiválasztása, és válasz megjelenítése.
						
        if (hivatkozas=="link1"){ uzenet = '1. Válasz!<br> A víz vegyjele.';
                document.getElementById ("d1").innerHTML = uzenet;
        }
        else if (hivatkozas=="link2"){ uzenet2 = '2. Válasz!<br> Eredmény = 49';
                document.getElementById ("d2").innerHTML = uzenet2;
        }
        else if (hivatkozas=="link3") { uzenet3 = '3. Válasz!<br> A felszin területi jele.';
                document.getElementById ("d3").innerHTML = uzenet3;
        }
        else if (hivatkozas=="link4") { uzenet4 = '4. Válasz!<br> A térfogat jele.';
                document.getElementById ("d4").innerHTML = uzenet4;
        }
        else if (hivatkozas=="link5") { uzenet5 = '5. Válasz!<br> Mert felfelé áramlik a hő, így lesz felhő!';
                document.getElementById ("d5").innerHTML = uzenet5;
        }
        else if (hivatkozas=="link6") { uzenet6 = '6. Válasz!<br> A folyadékokban.';
                document.getElementById ("d6").innerHTML = uzenet6;  
        }
        else if (hivatkozas=="link7") { uzenet7 = '7. Válasz!<br> Egyet sem. Mert a veréb nem lépked, hanem ugrál.';
                document.getElementById ("d7").innerHTML = uzenet7;
        }
        else if (hivatkozas=="link8") { uzenet8 = '8. Válasz!<br> Hozzáadunk 1-et. 2*2+1=5';
                document.getElementById ("d8").innerHTML = uzenet8;
        }
        else if (hivatkozas=="link9") { uzenet9 = '9. Válasz!<br> Azért, hogy maradék nélkül felezhessük.';
                document.getElementById ("d9").innerHTML = uzenet9;
        }
        else if(hivatkozas=="link10") { uzenet10 = '10. Válasz!<br> Ez a végtelen számsor.';
                document.getElementById ("d10").innerHTML = uzenet10;
        }

}

// Az eseménykezelők, onclick és onmouseout beállítása.
// A soreleji változónév tetszőleges lehet, azaz olyan, hogy egyértelmű legyen számunkra, melyik hivatkozásra vonatkozik.

valasz001 = document.getElementById ("link1");        valasz001.onclick=hover;        valasz001.onmouseout= uzenettorles;

valasz002 = document.getElementById ("link2");        valasz002.onclick=hover;        valasz002.onmouseout= uzenettorles;

valasz003 = document.getElementById ("link3");        valasz003.onclick=hover;        valasz003.onmouseout= uzenettorles;

valasz004 = document.getElementById ("link4");        valasz004.onclick=hover;        valasz004.onmouseout= uzenettorles;

valasz005 = document.getElementById ("link5");        valasz005.onclick=hover;        valasz005.onmouseout= uzenettorles;

valasz006 = document.getElementById ("link6");        valasz006.onclick=hover;        valasz006.onmouseout= uzenettorles;

valasz007 = document.getElementById ("link7");        valasz007.onclick=hover;        valasz007.onmouseout= uzenettorles;

valasz008 = document.getElementById ("link8");        valasz008.onclick=hover;        valasz008.onmouseout= uzenettorles;

valasz009 = document.getElementById ("link9");        valasz009.onclick=hover;        valasz009.onmouseout= uzenettorles;

valasz010 = document.getElementById ("link10");       valasz010.onclick=hover;        valasz010.onmouseout= uzenettorles;

Ismertető

Az onMouseOver akkor fut le, ha az egérmutató az objektum, azaz,
jelölőelem területe fölé áll.
Az onMouseOut akkor fut le, ha az egérmutató elhagyja az objektum, azaz,
jelölőelem területét.

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.

 

 

 

 

Vissza a lap elejére