Javascript image rollover

JavaScript image rollovers
JavaScript image rollovers have been one of the most used features for bringing interactivity to web pages. They refer to the change in the image when the mouse cursor is moved over and subsequently off the image.

Rollovers employ two JavaScript event handlers. onmouseover, that captures the action when the mouse cursor is brought over an image and onmouseout, that detects the action when the mouse cursor is moved off an image. These two even handlers are placed inside the anchor tag that surrounds the IMG tag.

We also use the src property of the JavaScript image object. This property refers to the file name of the image being displayed (image source). Finally, we employ the NAME attribute of the HTML IMG tag to explicitly refer to the image in question.
The logic is extremely simple. It's a matter of changing the image when the mouse cursor is placed over it and then changing it back to the original when the mouse cursor moves off the image.
Let's construct our image tag:


<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />

Note: We use the NAME attribute of the HTML IMG tag to give the name sub_but to our image. JavaScript event handlers will refer to the image with this name.You'll notice that the image source (file name) is moveup.gif, which is the image to be displayed when the mouse cursor is off the image.
Now, we place anchor tags around this image:

<a href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>

Lastly, we include the two JavaScript event handlers inside this anchor tag.

<a onmouseover="document.sub_but.src='movedown.gif'" onmouseout="document.sub_but.src='moveup.gif'" href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>

Easy SlideShow

You can make the slideshow easily by using Highslide.

What is Highslide JS? (Click Here for example)
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages:
No plugins like Flash or Java required.
Popup blockers are no problem. The images expand within the active browser window.
Single click. After expanding the image, the user can scroll further down or leave the page without restoring the image.
The approach uses two separate images. No heavy full-size image packed into thumbnail display size! The full-size image is loaded in the background either on page load or when the user clicks the thumb. You specify this option in the script's settings.
Compatibility and safe fallback. If the user has disabled JavaScript or the JavaScript fails in any way, the browser redirects directly to the image itself. This fallback is able to cope with most exceptions and incompatibilities.

Download Source code