Expanding images javascript. Thumbnails enlarge on mouseover.

Expanding images javascript makes thumbnails of images then expands them to full size on mouseover.

Expanding Images Javascript
Images enlarge on mouseover
This script makes thumbnails of images and then the thumbnails enlarge to full size on mouseover.

Handy Tip: Combining an eye catching image javascript with a hyperlink can help increase click throughs to important area's of your website.

Bookmark This Page | Click here for more javascripts

Expanding images javascript by Matthew LaCerais

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"> // Expanding images script copyright Matthew 
LaCerais MLacerais@osc.state.ny.us // Distributed by hypergurl http://www.hypergurl.com 
// Permission to use script granted if above credits are left intact  </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.

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name
Click for more info!

Email Hypergurl

Link To Hypergurl

Site design copyright 2001-2006 � hypergurl.com