Display a larger image on mouse over

add this script

<script language=javascript>
<!--
function Big(me)
{
me.height *= 2;
}
function Small(me)
{
me.height /= 2;
}
-->
</script>

Then when you display your images, just add the onmouseover and onmouseout event handlers to each image as shown here.

<img src="TheHan.gif" onmouseover='Big(this);' onmouseout='Small(this);'>

You may as well include larger versions of the images on the page and then scale them down with the height paramter because there is no need to re-download them when the mouseover occurs. This would be slow. Fow example, lets say you have the large image that is 300 pixels high and 300 pixels wide.
Use this image tag to download the full size image when the page loads, but display the images at 1/2 height until they mouse over the image.

<img src="My300x300pic.jpg" height="150" onmouseover='Big(this);' onmouseout='Small(This)'>

The "this" being passed to the Big and Small routines refers to the image object. Only specify either the height or the width when specifying the size of the object. This will cause it to scale correctly.

thumbnail image show large image separately, on mouseover

Here's the small script:

<script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.re place("_th","")
}
</script>

Place an <img> tag somewhere in the page and give it the id BigOne. This is the image that will be replaced.

Put this in all the thumbnail <img> tags:

onMouseOver="Change_Big_One(this)"

If you use the same image both as a thumbnail and as the fullsize version, remove
----
.replace("_th","")
---
in the code above.