37 besökare, 1 medlem och 3 Studenter är online nu
Loopia

Webdesign och HTML

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