Pop-up image Script
Note: Script rewritten Feb 2nd, 2004.
Description: Want a quick and lightweight method to make your images "pop up", but depressed when the mouse is held down over them? With the help of DHTML, you can, using scripting, and only scripting! This script creates the illusion of an elevated image by applying a shadow and shifting the image to the up and left. When the user holds down the mouse, the shadow is deleted, and the image shifted back to its usual position. There's no need to create alternate versions of the same image, since the entire effect is generated through code. You may customize both the shadow length and color for each individual image in which the effect is applied to. Cool!
This is an IE5.5+ only effect, with other browsers simply seeing the regular image.
Giving an image a pop-up effect
Having done the above, to add the pop up effect to any image, just add the below parts in red into the desired image tag as follows:
<img src="dynamiclogo4.gif" class="shadowcss" effect="popshadow" mousedowncolor="white" mouseupcolor="gray">
Here's a description of each attribute:
As you can see, set the final two attributes to the color of the shadow when the image is depressed, and when it's not.
Customizing the shadow length for different images
Depending on the size and kind of image, you may wish to give it a shorter or longer shadow. By default, the style sheet that comes with the script looks like this:
This creates a shadow of 5 pixels. To change it to 3 pixels, for example, modify all instances of 5 above to 3.
You may take things one step further and create more than one shadow length and color, to be applied to different images on the same page for example. To do this, simply define multiple CSS classes:
Notice how we've created a second CSS class called "shadowcss2" along with the original. To give an image a shadow length of 10 now, we simply specify 'shadowcss2" inside the image tag in question instead of "shadowcss":
<img src="dynamiclogo4.gif" class="shadowcss2" effect="popshadow" mousedowncolor="white" mouseupcolor="#CDCDCD">
Simple enough right?
This script uses conditional comments of IE so the style sheet is only interpreted in IE5.5+:
<!--[if gte IE 5.5000]> //style sheet goes here <![endif]-->
This ensures that the initial offsetting done to the image is applied only to IE5.5+.