Submit FAQs Awards Usage Terms Contact
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

DOM Image Rollover II

Author: Adam Smith | Homepage

Note: Updated June 20th, 05'. Script rewritten for smaller file size and improved structure.

Description: This script makes it easy to add rollover/ mousedown effects to any image on the page, including image submit buttons. Automatically preloads images as well. Script works in all DOM capable browsers- IE5+, NS6+, Opera7+.

Demo: Move your mouse over the following image:

Image Effect Sample HTML
Rollover only on image. <img src="original.jpg" srcover="over.jpg">
Rollover and Mousedown. <img src="original.jpg" srcover="over.jpg" srcdown="down.jpg">
  Rollover and Mousedown on submit button. <input type="image" name="submitimg" src="original.jpg" srcover="over.jpg" srcdown="down.jpg" border="0">

Directions Developer's View

Step 1: Insert the below script into the <head> section of your page:

Select All

Step 2: The above accesses an external JavaScript file. Download the below file, and upload to your webpage directory:

oodomimagerollover.js

Step 3: All that's left is applying the rollover/ mousedown effect to the desired images! Simply refer to the above table to see the corresponding HTML to insert into your image tag depending on the effect. Enjoy!