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


IE5+

Pop-up image Script

Author: Dynamic Drive

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.

Demo:

Original Images Images with pop up script added

(longer and lighter shadow than above two.)

Directions: Developer's View
Insert the below code into the <HEAD> section of your page:

Select All

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:

class="shadowcss" Contains the name of the CSS class that initially sets the image to be relatively positioned and offset to the left and top, with the "shadow" filter applied to it.
effect="popshadow" Do not modify.
mousedowncolor=? Specify the color of the shadow when the image is depressed (color name or its hex value). Should match the color of your page's background if you wish to create the illusion of the shadow disappearing.
mouseupcolor=? Specify the color of the shadow when the image is not depressed. In other words, the color of the shadow.

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:

<style type="text/css">

.shadowcss{
position: relative;
top: -5px;
left: -5px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');
}

</style>

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:

<style type="text/css">

.shadowcss{
position: relative;
top: -5px;
left: -5px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');
}

.shadowcss2{
position: relative;
top: -10px;
left: -10px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#CDCDCD', Positive='true');
}

</style>

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?

Developer's Info.

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+.