Image map color change

[lakshmananindia]

Hi friends, here is my problem.

    I have a square image. I split that image into 2 halves using mapping.

    One half will be green in color and another will be in blue.

 

    Now my requirement is, when a user click the green halves, i need to change the color only for the green half and it shouldn't affect the blue half.

 

Please tell me a way for this!

 

[Floydian]

My testing indicates that the AREA elements don't exactly live over the image map. And thus image map elements are very specially handled.

 

A solution: make three images. One in a normal state. Second in a hovered state for one part. Third for the other hovered state.

 

You can make this a sprite image, or just have three seperate images.

 

If you use seperate images, then when one area is hovered over (js will respond to hover events on area tags properly), swap out the img src to suit.

 

If you use one sprite bg image, then you'd simply slide that bg image when an area tag is hovered over.

 

I haven't been able to think of any other ways to get image maps to highlight their affected regions because areas don't exactly occupy a physical region even though they cause events to fire in those regions.