DHTML Shock
Articles/Tutorials
Discussion Forum
Latest Additions
FAQs
Link to us
Submit-a-Script
Web Design Toolbox
Wish List

Contact Us

Script Library

Link to us!!!
Link to US!!!



Electrify your web site with our free copy and paste DHTML scripts, free DHTML Menus, free Dynamic HTML tutorials and javascript.


Home : Image Effects: Image Rollovers

This is probably the smallest image rollover script I've ever seen. You have two lines to preload all your images, and then just a small bit of script in each link to create your rollovers. Very elegant, and easy to set up.

Credits:
Created by: Mike McGrath
Website: website.lineone.net/~mike_mcgrath
Browser Information: NN, IE4+
Additional Notes: None

Demonstration:
MouseOver our sad web developer.

Coding:
Copy and paste this code into the <HEAD> of your document, to preload your images:


Copy and paste this to create your mouseovers.


Instructions:
The script for the head of your document preloads any mouseover images, so that there is no lag time for the image to download, when a user mouses over.

First, you must name all your images, like so:

<img border=0 name="imagename" src="off.gif" width="100" height="68">

Then, set up your links:

<a href="link.htm" onMouseOver="imagename.src='on.gif'" onMouseOut= "imagename.src='off.gif'">

If you wanted to swap several images you would set your links like this:

<a href="link.htm" onMouseOver="imagename.src='on.gif'; imagename2.src='on2.gif " onMouseOut= "imagename.src='off.gif'; imagename2.src=off2.gif ">

Site designed, coded, and maintained by Web Shorts Site Design.
Copyright © 2000 - 2007 DHTML Shock.
Please read the Terms Of Use before using any of the scripts.
DHTML Shock Privacy Policy | Support DHTMLShock
PO Box 80575, Portland, Oregon 97280

Free Webmaster Resources Web Templates Stock Photos Free Javascripts
Cartweaver ColdFusion Shopping Cart


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network