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.

Try image mapping: http://www.tutorialspoint.com/javascript/javascript_image_map.htm — DevlshOne, Jul 24 '13 at 02:20
Please **avoid w3schools**; read this: http://www.w3fools.com/ — ANeves, Jul 24 '13 at 02:24
@DevlshOne By providing coordinates, would it also dynamically size along with my image when I change the size of my browser? — wpakt, Jul 24 '13 at 02:24
@ANeves Oh wow, I didn't know they had such a bad reputation. — wpakt, Jul 24 '13 at 02:26
@jennC No, I'm afraid the image mapping relies on a constant sized image. — DevlshOne, Jul 24 '13 at 02:29
@DevlshOne Is there are way to do it with percentages, like the above CSS? Either using Javascript or CSS. If not, would it be a good or a bad idea to upload those parts of the image and put them on top of the original image, so there can be a defined area to rollover/click. My concern is that the sub-images could look matched up in one browser at a certain size, but would shift or mess up in another browser. — wpakt, Jul 24 '13 at 02:34
@jennC I didn't see a way to map it with percentages and trying to assemble puzzle pieces may get difficult. See if this post helps you at all: http://stackoverflow.com/questions/5190543/jquery-image-map-alternative, or this one:http://stackoverflow.com/questions/1563299/recalculate-image-map-after-window-resize — DevlshOne, Jul 24 '13 at 02:38

score 1 · Answer 1 · answered Jul 24 '13 at 03:08

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

Rollover Effect on Multiple Areas of an Image

1 Answers1