How Do I Make Clickable Image Maps of a Picture in a Website highlightable?

[thedealmaker]

Hi,
I want part of the picture in a website highlight when user moves their mouse pointer on it, just like the button moves by using javascript onclick. Should I use image maps? If so, how do I make it highlightable?

Many thanks.

 

[Chebago]

you can probably do it one of 2 ways, the first would be to use the javascript onmouseover and onmouseout (I think those are what they are called) and switch images, so basically one image would be the normal part of the picture and the other would be the highlighted image...

I think you could also use CSS, if the image has alot of white and is transparent then you could probably just change the background color using :hover, otherwise you might be able to create a layer that floats above the part of the image and then changes the color on hover...I have never tried that so it might work, but I'm not sure, goodluck...

 

[thedealmaker]

There are multiple different parts of the image that I want to highlight when the mouse move over, does css work in this case too? or do I have to use javascript?

Originally posted by: Chebago
you can probably do it one of 2 ways, the first would be to use the javascript onmouseover and onmouseout (I think those are what they are called) and switch images, so basically one image would be the normal part of the picture and the other would be the highlighted image...

I think you could also use CSS, if the image has alot of white and is transparent then you could probably just change the background color using :hover, otherwise you might be able to create a layer that floats above the part of the image and then changes the color on hover...I have never tried that so it might work, but I'm not sure, goodluck...

 

[Chebago]

you could have each part highlight differently I would assume, just as long as they all use the :hover, you could just tweak the class or ids so they can be different colors and everything, goodluck...