Help with Image Map & OnMouseOver Image Change

[NTxNerd]

I need help with Image Map & OnMouseOver Image Change.

Here is the link. The main image should have 7 different images that change when you mouseover on each different picture.

I'm not sure how to achieve this. Should there be a preload? I've tried several different things as you can see in my source. I feel like I'm close but not sure where to go with this.

The web has so many different ways of achieving it.

Thanks in advance!

[Wickham]

The web has so many different ways of achieving it.

That's very true. You have an image map that works well, but hover images may not be possible. Background-images won't work because the image map already has a normal image petroflexsample.png and so several background-images would be behind it.

I used a totally different method in item 2b here http://www.wickham43.net/imagemaps.php

It uses a position: relative containing div with the main image (you would use petroflexsample.png) and then uses position: absolute to layer separate divs over the top positioning them with top and left positions. My images are small but you could make them the size of each of your seven images and each would be a link (my code uses display: block so that the image is a link for its whole area).

[NTxNerd]

Okay I will play with it and see what I can come up with.

Thank you. I know this is something I will use a lot in the future and wanted to get familiar with the technique.

[NTxNerd]

Is your <dl id> the same as my div id?

[Wickham]

My <dl id="imap2"> is the equivalent of your <DIV id="headerpic">
My <dd> is the equivalent of your <AREA....

As I said, I couldn't think of a way to add the hover images on an image map, so I used a dl and dd list with position: absolute divs layered on top with the links.

There probably are other ways.

[NTxNerd]

Thank you. I think I figured it out.