ColourMod :: Dynamic (DHTML) Color Picker

I’ve been working on website that has a lot of images and each image needs to be updated. The only problem is that these images have drop-shadows. This means that I need to use PNG images. This isn’t really that big of a deal, except that the PNG images needed to be used in the navigation area. Since they are in the navigation area I needed to show that the mouse hovered over it.

To display PNG files in IE you have to use the convoluted filter:progid:DXImageTransform.Microsoft.Alpha ImageLoader(enabled=true, sizingMethod=scale src='image.png'); code. and a couple css tricks. But what if you wanted to do an image replacement? It gets even more convoluted. Because then you have to replace the whole filter code junk. I came up with an easier solution. Since my navigation images were suppose to decrease in size I realized that I could just adjust the image height and width, a much simpler task.

To do this all you have to do is use some simple Javascripting. With an onmouseover, you create a function that decreases the image by a certain percentage, and then with an onmouseout you return it back to its normal size. This method does not interfere with how the PNG files are being displayed, and you don’t have to swap any images and degrads really nice if someone does not have Javascript enabled.