Expanding images javascript

Here's a great way to display your images in thumbnails and enlarge them on the page on mouseover.
Simply make your images around 170 pixels by 125 pixels and the script will do the rest. In the example above we have used 5 images, yet with a little manipulation of the script you could add more or less if desired.
You will need to position the description layer to suit your page, more details below.
Installation:
Step 1
Copy and paste the code below into the head of your html document. Nothing to configure in this part.
<script language="JavaScript">
function resizeImage(e) { if (document.layers) { //Netscape var xMousePos = e.pageX; var
xMousePosMax = window.innerWidth+window.pageXOffset; } else if (document.all)
{ // IE var xMousePos = window.event.x+document.body.scrollLeft; } else if (document.getElementById)
{//Netscape var xMousePos = e.pageX; var xMousePosMax = window.innerWidth+window.pageXOffset;
} var i = (-1 * (((xMousePos/340) - (250/340)) * ((xMousePos/340) - (250/340))))
+ 1; if (i < .4) i = .4; if (i > 2) i = 2; picture1.width=(170 * i); picture1.height=(125
* i); i = (-1 * (((xMousePos/340) - (420/340)) * ((xMousePos/340) - (420/340))))
+ 1; if (i < .4) i = .4; if (i > 2) i = 2; picture2.width=(170 * i); picture2.height=(125
* i); i = (-1 * (((xMousePos/340) - (525/340)) * ((xMousePos/340) - (525/340))))
+ 1; if (i < .4) i = .4; if (i > 2) i = 2; picture3.width=(170 * i); picture3.height=(125
* i); i = (-1 * (((xMousePos/340) - (600/340)) * ((xMousePos/340) - (600/340))))
+ 1; if (i < .4) i = .4; if (i > 2) i = 2; picture4.width=(170 * i); picture4.height=(125
* i); i = (-1 * (((xMousePos/340) - (680/340)) * ((xMousePos/340) - (680/340))))
+ 1; if (i < .4) i = .4; if (i > 2) i = 2; picture5.width=(170 * i); picture5.height=(125
* i); } function output(message) { obj = eval("text"); obj.innerHTML
= "<font size=\"6\">"+message+"</font>";
} function handleMouse() { if (document.layers) { // Netscape document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = resizeImage; } else if (document.all) { // Internet Explorer
document.onmousemove = resizeImage; } else if (document.getElementById) { // Netcsape
6 document.onmousemove = resizeImage; } } function doNothing(e) { var i = 0.4;
picture1.width=(170 * i); picture1.height=(125 * i); picture2.width=(170 * i);
picture2.height=(125 * i); picture3.width=(170 * i); picture3.height=(125 * i);
picture4.width=(170 * i); picture4.height=(125 * i); picture5.width=(170 * i);
picture5.height=(125 * i); } function ignoreMouse() { if (document.layers) { //
Netscape document.captureEvents(Event.MOUSEMOVE); document.onmousemove = doNothing;
} else if (document.all) { // Internet Explorer document.onmousemove = doNothing;
} else if (document.getElementById) { // Netcsape 6 document.onmousemove = doNothing;
} } //--> </script>

Step 2
Copy and paste the code below into your html where you want the images to appear on your page. Change the links within to your own and the image src to reflect the images that you use.
<table
width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <td colspan="4" onMouseOver="ignoreMouse()"></td>
</tr> <tr> <td width="8" height="140" valign="bottom"
onMouseOver="ignoreMouse()"> </td> <td width="142"
valign="bottom" onMouseOver="handleMouse()"></td>
<td width="889" valign="bottom" onMouseOver="handleMouse()"><nobr>
<a href="http://www.hypergurl.com" target="_blank"><img
name="picture1" src="image1.gif" width="68" height="50"onMouseOver="output('Palm
Tree')" onMouseOut='output("")' border="0"></a>
<a href="http://www.hypergurl.com/hosting.html" target="_blank"><img
name="picture2" src="image2.gif" width="68" height="50"
onMouseOver="output('Family')" onMouseOut='output("")' border="0"></a>
<a href="http://www.hypergurl.com" target="_blank"><img
name="picture3" src="image3.gif" width="68" height="50"onMouseOver="output('Family
1')" onMouseOut='output("")' border="0"></a>
<a href="http://www.hypergurl.com" target="_blank"><img
name="picture4" src="image4.gif" width="68" height="50"onMouseOver="output('Menu
Option 4')" onMouseOut='output("")' border="0"></a>
<a href="http://www.hypergurl.com" target="_blank"><img
name="picture5" src="image5.gif" width="68" height="50"onMouseOver="output('Menu
Option 5')" onMouseOut='output("")' border="0"></a>
</nobr></td> <td width="3" valign="bottom"
onMouseOver="ignoreMouse()">&nbsp;</td> </tr> <tr>
<td height="10" colspan="4" onMouseOver="ignoreMouse()"></td>
</tr> </table>
Step 3
Copy the code below and paste this below step 2 within your html source. Change the left and top pixel figures to suit the position of the text description on your page layout.

<div
id="text" name="text" style="position:absolute; left:166px;
top:527px; width:665px; height:94px; z-index:1" onMouseOver="ignoreMouse()"></div>