Csere képváltó
Cseréknél gyakori, de egyébként bármi másra használható, akár kis képtárnak is :).
Két része van a kódnak, egyikben meg kell adni a kisképeket, a másikban pedig a nagyokat. Értelemszerűen kell hivatkozni: ha a második sorban adod meg Béla oldalának kisképét, akkor a másik kódban is a második helyen add meg Béla oldalának nagy képét :). Az itt lévő kódban 3 kicsi és hozzá 3 nagy kép jeleníthető meg, további képekhez másold mindig az előtte lévő részt.
Értsd: akarunk egy negyedik cserét is betenni a kódba. Ebben az esetben az első kód végére másolunk még egy sort, a kódban szereplő onmouseover="document.layout.src=image3.src résznél a számot meg kell növelni eggyel, a mi esetünkben a 3-as helyére 4 megy:
<a onmouseout="document.layout.src=image0.src" onmouseover="document.layout.src=image4.src" href="http://cseréd url címe/"><img alt="" src="kiskép" /></a>
Az elején lévő onmouseout utánni image0.src-t ne írd át, ezen múlik, hogyha leviszik az egeret a kisképről, akkor az alapképed jelenjen meg.
A második kódnál is ügyelünk arra, hogy a számokat átírjuk 4-re:
image4 = new Image;
image4.src = "nagykép";
A kódrészleteket egy modulba tedd. Az alapképet, ami akkor jelenik meg, ha nem viszik rá a kisképre az egeret, mindkét kódrészletben meg kell adnod! A kódban jelöltük, mit hol kell megadnod.
A kód első része:
<img id="img" alt="" name="layout" src="ide jön az alap képed" /> </br> </br>
<a onmouseout="document.layout.src=image0.src" onmouseover="document.layout.src=image1.src" href="http://cseréd url címe/"><img alt="" src="első kiskép" /></a>
<a onmouseout="document.layout.src=image0.src" onmouseover="document.layout.src=image2.src" href="http://cseréd url címe/"><img alt="" src="második iskép" /></a>
<a onmouseout="document.layout.src=image0.src" onmouseover="document.layout.src=image3.src" href="http://cseréd url címe/"><img alt="" src="harmadik kiskép" /></a>
A kód második része:
<script type="text/javascript">
image0 = new Image;
image0.src = "ide jön az alap képed";
image1 = new Image;
image1.src = "első nagy képe";
image2 = new Image;
image2.src = "második nagy képe";
image3 = new Image;
image3.src = "harmadik nagy képe";
</script>
|