Rollover Effect on Multiple Areas of an Image

Question

I'm trying to make a rollover effect on specific parts of an image. So depending on which area is hovered over the image would change to a different image. I also want those parts of the image to be clickable. I don't think I can simply map the area I want to do the rollovers and links because I want the images/clickable areas to size dynamically according to the size of the browser.

This is what I have so far:

The image is under this CSS:

#banner {
    width: 100%;
    margin-top: 0px;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
    position: relative
 }

And I made a clickable box in CSS:

a.box1{
    display: block;
    position: absolute;
    top: 17%;
    left: 16%;
    width: 15.5%;
    height: 9%;
}

Do you guys have any Javascript tips on how to do this. I'm thinking about doing something like this http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover , but I would need to specify an image. Is there a way to create a dynamically sized empty image box, like box1 (CSS above), since the rollover effect only goes off when you hover over a certain spot of the image.

Answer 1

You can do this fairly simply with image sprites, the same idea used in original video games. The best part is, you only have to use one image, which means the page will load beautifully and nothing other than some mathematical css is required - no javascript. It works in every browser old and new. This article from A List Apart explains the whole process: http://alistapart.com/article/sprites