mouse over

<html>

<head>
<title>Pre-cached Image MouseOver with Status Bar Alert.</title>
<script language="JavaScript">

//Pre-cache all "off" images
var offImages = new Array(new Image(),new Image(),new Image());
offImages[0].src = "image1.gif"
offImages[1].src = "image2.gif"
offImages[2].src = "image3.gif";


//Pre-cache all "on" images
var onImages = new Array(new Image(180,178),new Image(180,178),new Image(180,178));
onImages[0].src = "image4.gif"
onImages[1].src = "image5.gif"
onImages[2].src = "image6.gif";


//Pass index number and Swap anchor image with image defined in offImages array above
function imageOff(i){
    document.images[i].src = offImages[i].src;
}

//Pass index number and Swap anchor image with image defined in onImages array above
function imageOn(i){
    document.images[i].src = onImages[i].src;
}

//Send message to status bar
function setMsg(msg){
    window.status = msg;
    return true;
}

</script>
</head>

<body>



<a href="www.javascripts.com" onMouseOver="imageOn(0); return setMsg('Click here to check out JavaScripts.com!')" onMouseOut="imageOff(0); return setMsg('')">
<img border="0" src="image1.gif" width="180" height="178"></a>
<br>
<a href="www.javascripts.com" onMouseOver="imageOn(1); return setMsg('Click here to check out JavaScripts.com!')" onMouseOut="imageOff(1); return setMsg('')">
<img border="0" src="image2.gif" width="180" height="178"></a>
<br>
<a href="www.javascripts.com" onMouseOver="imageOn(2); return setMsg('Click here to check out JavaScripts.com!')" onMouseOut="imageOff(2); return setMsg('')">
<img border="0" src="image3.gif" width="180" height="178"></a>


</body>

</html>

Først scriptet - placeres mellem <HEAD>.....</HEAD>
****************************************************************
<script language="Javascript"><!--
function ChangeImg(imgName,Target) {
  img = new Image;
  img.src = imgName;
  document[Target].src = img.src;
}
// --></script>
****************************************************************
Og så dine links - placeres mellem <BODY>...</BODY>
****************************************************************
<a href="doc1.html" onMouseover="ChangeImg('on1.gif','pic')" onMouseout="ChangeImg('off1.gif','pic')"><img src="off1.gif" border=0 name="pic"></a>

<a href="doc2.html" onMouseover="ChangeImg('on2.gif','pic')" onMouseout="ChangeImg('off2.gif','pic')"><img src="off2.gif" border=0 name="pic"></a>

..........

o.s.v. op til 8 links.

OBS: Det er en god idé at "pre-loade" de billeder, der skal vises når musen er over. Det gøres nemmest således:

<script language="Javascript"><!--
billede1 = new Image()
billede1.src = 'on1.gif'
billede2 = new Image()
billede2.src = on2.gif'
billede3 = new Image()
billede3.src = on3.gif'
billede4 = new Image()
billede4.src = on4.gif'
billede5 = new Image()
billede5.src = on5.gif'
billede6 = new Image()
billede6.src = on6.gif'
billede7 = new Image()
billede7.src = on7.gif'
billede8 = new Image()
billede8.src = on8.gif'
// --></script>

jeg har brugt lidt fra hver, så det er vel også rimeligt at i deler i porten

hirtshals<<
jeg synes ikke det virker helt som det skulle!
når jeg tilføjer flere billeder.
jeg får meddelsen: offImages.3' er ikke et object.
men hvis jeg sletter tilføjelsen virker eksemplet.