New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
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+

Highlight image Script II

Author: Dynamic Drive

Description: We got our inspiration for this script from the site Mcafee.com, which contains such an effect on one of its pages. Move your mouse over any of the participating images, and a border is applied to it onMouseover. The border color is customizable for each image. This script works in both IE 4+ and NS 6+, and as always, degrades well with the rest of the bunch.

Demo:

Move your mouse over any of the following three images:

Directions Developer's View

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

Select All

Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:

Select All

An example would be:

<img src="man.gif" class="borderimage" onMouseover="borderit(this,'black')" onMouseout="borderit(this,'white')">