Creating CSS Image Maps With Transparent Images

September 6th, 2007

We recently released an update to RAGE MapDesign which adds support for transparent PNGs in image maps. This means that you can easily overlay any mouse over or mouse down effect in your image map by using png images. This make it really easy to make beautiful transitions using only CSS and XHTML.

I created an example to show off what you can do with the new transparency features. Check out this sample CSS Based Image Map with transparency. The image will overlay the background image with a transparent PNG as the mouse moves over the specified hot spots. This example took about 10 minutes to make including creating the PNGs and putting it up online.

In contrast, when I used version 1.0 to create this image map, it took a while to fake the transparency by using the same section of the main image as the background image for the mouse over effects.

We have some great new features already planned for the next free update of RAGE MapDesign, so keep checking back!


Leave a Reply