Onmouseover light ups with an image map.

I would like an image to change when the mouse moves over a certain section. I would do this with multiple images, but it is a pie chart style menu. Therefore, if the mouse is over a certain section of the picture, change the picture to this...

Who is Participating?
IntergnatConnect With a Mentor Commented:
Easily done with an image map.  Create hotzones (i.e., the <AREA> tags) that correspond to your pie wedges.  For each <AREA>, set up an "onMouseOver" event handler that swaps in a new graphic with the desired wedge highlighted.

Note that you're swapping in an entire copy of the image.  This is necessary because (as you noted) HTML can only tile rectangular image segments together into an apparent whole image.  By swapping the whole image, you can get the effect you want.  

Remember that each image (one for each highlighted pie wedge), should have the same dimensions, so that the <AREA>s match up, regardless of which image is currently showing.

I suggest you preload the images, to improve the performance.  However, the topic of image preloading is beyond the scope of your question.
Do you mean something like the following URL?:


Let me know if you want help implementing...

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.