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.   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. Step 1  <script language="JavaScript"> // Expanding images script copyright Dotty Sanders lasanda@cayoterune-world.com  // Distributed by hypergurl http://www.cayoterune-world.com // Permission to use script granted if above credits are left intact <!-- 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.cayoterune-world.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.cayoterune-world.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.cayoterune-world.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.cayoterune-world.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.cayoterune-world.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>