OnMouseOver med popupbild
Exempel 1
Här används fyra bilder, en bild som visas i original (och OnMouseOut) och två bilder som visar rolloverbilderna (OnMouseOver). Här används alltså två olika rolloverbilder varav en av bilderna kan placeras
i en annan position än originalbilden. Du bestämmer var genom att placera
ut en transparent GIF-bild i den position rolloverbilden ska visas.
Prova att föra muspekaren över knapparna!
OBS! Om du vill att popupbilden för de länkade bilderna ska visas i olika position hittar du information i guiden OnMouseOver med popupbild - exempel 2 »
TIPS! Fler rollover-script hittar du i guiderna:
OnMouseOver med rolloverbild »
Rollover-image
och Navigation Bar »
Rollovers
i ImageReady »
Steg 1:
Lägg koden inom <HEAD>
Byt ut namnen på bilderna mot dina egna bildnamn på originalbilden och rolloverbilden. Här används totalt 4 st bilder: en originalbild (bild.gif), en rolloverbild i samma position (bild_over.gif), en rolloverbild i annan position (popup.jpg) och en "bildplatshållare" för popupbilden (popup_blank.gif).
<HEAD>
<script language="javascript">
if (document.images) {
<!-- transparent GIF-bild som används för OnMouseOut av den extra rolloverbilden -->
pop_blankout = new Image();
pop_blankout.src = "popup_blank.gif";
<!-- originalbild, rolloverbild och extra rolloverbild (popup) anges här -->
<!-- bild nr 1 -->
image1over = new Image();
image1over.src = "bild1_over.gif";
image1out = new Image();
image1out.src = "bild1.gif";
pop_blankpopup1 = new Image();
pop_blankpopup1.src = "popup1.jpg";
<!-- bild nr 2 -->
image2over = new Image();
image2over.src = "bild2_over.gif";
image2out = new Image();
image2out.src = "bild2.gif";
pop_blankpopup2 = new Image();
pop_blankpopup2.src = "popup2.jpg";
<!-- bild nr 3 -->
image3over = new Image();
image3over.src = "bild3_over.gif";
image3out = new Image();
image3out.src = "bild3.gif";
pop_blankpopup3 = new Image();
pop_blankpopup3.src = "popup3.jpg";
}
<!-- funktioner för OnMouseOver, OnMouseOut och extra OnMouseOver -->
function image_over(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + "over.src"); }
}
function image_out(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + "out.src"); }
}
function image_over_popup(imgname, imagesrc) {
if (document.images) {
document[imgname].src = eval(imgname + imagesrc); }
}
</script>
</HEAD>
Steg 2:
Lägg koden inom <BODY>
Inom <A HREF> för varje bildlänk placeras javascriptet för OnMouseOVER och OnMouseOut. Observera att varje bild måste ha ett eget namn som tex: img name="image1" och det är alltså inte filnamnet (bild1.gif) utan det angivna bildnamnet (image1) som används av javascriptet.
OnMouseOver innehåller här två funktioner, en för rolloverbilden (image_over) och en för popupbilden (image_over_popup). OnMouseOut innehåller också två funktioner, en för originalbilden och en för bildplatshållaren (transparent GIF-bild).
<BODY>
<!-- bild nr 1 -->
<a href="https://webdesignskolan.se"
onMouseOver="image_over(
'image1'); image_over_popup('
pop_blank', '
popup1.src');" onMouseOut="image_out('
image1'); image_out('
pop_blank');">
<img name="
image1" src="
bild1.gif" border="0"></a>
<!-- bild nr 2 -->
<a href="https://webdesignskolan.se"
onMouseOver="image_over('
image2'); image_over_popup('
pop_blank', '
popup2.src');" onMouseOut="image_out('
image2'); image_out('
pop_blank');">
<img name="
image2" src="
bild2.gif" border="0"></a>
<!-- bild nr 3 -->
<a href="https://webdesignskolan.se"
onMouseOver="image_over('
image3'); image_over_popup('
pop_blank', '
popup3.src');" onMouseOut="image_out('
image3'); image_out('
pop_blank');">
<img name="
image3" src="
bild3.gif" border="0"></a>
<!-- bildplatshållare för popupbild (transparent GIF) -->
<br>
<br>
<img name="
pop_blank" src="
popup_blank.gif" border="0">
</BODY>
Här är bilderna som används i exemplet:
Logga in
skriv ut »