New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Depressible Image Link Script

Author: Dynamic Drive

Description: A script that makes an image link appear "depressed" as the mouse is held down on it. Similar to rollover effects, only that the effect takes place when the mouse is down.

Demo:


Directions

Step 1: Copy the below two images (or use your own) onto your HD by right clicking them, and choosing "save as":

up.gif (1876 bytes) down.gif (1913 bytes)

Step 2: Insert this into the <head> section of your page. If you're using your own images, change "up.gif" and "down.gif" to your images' file names.

Select All

Step 3: Finally, insert the below into the <body> section of your page:

<a href="whatever.htm" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>

If you want multiple depressible images within one page, simply repeat steps 2 and 3 for each depressible image. When repeating step 2, be sure to change the image file names in the code to reflect the images you're using. When repeating step 3, be sure to change the part in blue ('example') to another unique name.