OnMouseOver med popupbild
Exempel 2
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 samma position hittar du information i guiden OnMouseOver med popupbild - exempel 1 »
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).
Identifieraren för bildplatshållaren (transparent GIF) har här olika namn, "pop1_blank", "pop2_blank", "pop3_blank" osv. Detta för att popup-bilden ska visas i olika position.
<HEAD>
<script language="javascript">
if (document.images) {
<!-- transparenta GIF-bilder som används för OnMouseOut av den extra rolloverbilden -->
<!-- bild nr 1 -->
pop1_blankout = new Image();
pop1_blankout.src = "popup_blank.gif";
<!-- bild nr 2 -->
pop2_blankout = new Image();
pop2_blankout.src = "popup_blank.gif";
<!-- bild nr 3 -->
pop3_blankout = new Image();
pop3_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";
pop1_blankpopup1 = new Image();
pop1_blankpopup1.src = "popup1.jpg";
<!-- bild nr 2 -->
image2over = new Image();
image2over.src = "bild2_over.gif";
image2out = new Image();
image2out.src = "bild2.gif";
pop2_blankpopup2 = new Image();
pop2_blankpopup2.src = "popup2.jpg";
<!-- bild nr 3 -->
image3over = new Image();
image3over.src = "bild3_over.gif";
image3out = new Image();
image3out.src = "bild3.gif";
pop3_blankpopup3 = new Image();
pop3_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).
Identifieraren för bildplatshållaren (transparent GIF) har här olika namn, "pop1_blank", "pop2_blank", "pop3_blank" osv. Detta för att popup-bilden ska visas i olika position.
<BODY>
<!-- bild nr 1 -->
<a href="https://webdesignskolan.se"
onMouseOver="image_over('
image1'); image_over_popup('
pop1_blank', '
popup1.src');" onMouseOut="image_out('
image1'); image_out('
pop1_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('
pop2_blank', '
popup2.src');" onMouseOut="image_out('
image2'); image_out(
'pop2_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('
pop3_blank', '
popup3.src');" onMouseOut="image_out('
image3'); image_out('
pop3_blank');">
<img name="
image3" src="
bild3.gif" border="0"></a>
<!-- bildplatshållare för popupbild (transparent GIF) -->
<br>
<br>
<img name="
pop1_blank" src="
popup_blank.gif" border="1">
<img name="
pop2_blank" src="
popup_blank.gif" border="1">
<img name="
pop3_blank" src="
popup_blank.gif" border="1">
</BODY>
Här är bilderna som används i exemplet:
Startbilder:
bild1.gif
bild2.gif
bild3.gif
Overbilder:
bild1_over.gif
bild2_over.gif
bild3_over.gif
popup1.jpg
popup2.jpg
popup3.jpg
Transparent GIF-bild (platshållare):
popup_blank.gif
Logga in
skriv ut »