TUTORIALS

Advanced Javascript

Select images by hovering mouse:

Gibbon Mother-Baby One    Gibbon Mother-Baby Two    Gibbon Mother-Baby Three

Here is the code that goes in the header section (between the "head" tags) to preload the images and place the function:

<script language="JavaScript">
<!--
if (document.images)
{
image1= new Image(200,300);
image1.src="image1.gif";

image2= new Image(200,300);
image2.src="image2.gif";

image3= new Image(200,300);
image3.src="image3.gif"; }

function change1(picname,imgname)
{
if (document.images)
{
imgon=eval(imgname + ".src");
document[picname].src= imgon;
}
}

//-->
</script>

Here is the code that goes in the body section where you want the images to appear:

<a href="url" onMouseover="change1('pic1','image1')" >Gibbon Mother-Baby One</a>
  
<a href="url" onMouseover="change1('pic1','image2')" >Gibbon Mother-Baby Two</a>
  
<a href="url" onMouseover="change1('pic1','image3')" >Gibbon Mother-Baby Three</a>
<p />
<img src="image1.gif" name="pic1" width="200" height="300" border="0">