Image map mouseover script.

[FishyMonkey78]

I simply want to create a image map, say, called map. Then, I'd create an area, of course. When someone mouses over that area, I want that part of the image in that area that the user moused over to change to an image I define.

Problem is, I hae no clue how to do this at all. I've tried, and I don't know how. I've looked on the internet, and it is nowhere. I'd give you a script to work with, but I don't have one. Sorry. :(

Thanks in advance for any help. Oh, as you can tell, I'm new, so howdy.

[freefall]

Hello, hope I can be of some help

Let's examine some possibilities for what you want to do. The necessary elements here are your initial image, the map, and an onmouseover and onmouseout event in each area.

Scenario 1 (The easy, slow-loading way):
You use the mouseover events to trigger a function that will change the entire image that utilizes the map. You can make individual images for each area. But that method is detrimental to load time (although easier to code that the next).

Scenario 2 (The complex, fast-loading way):
You slice the mapped image into whatever parts of the image will change when the mouse rolls over each area. That will leave you with one small image for each area. On your site, use divs to properly align the small images exactly where they should appear over the image. Then set their visibility to hidden. Your mouseover and out functions can change a certain div's visibility. More coding, faster-loading!

Hint:
For the second scenario, it would be helpful to position the main image inside a div, and put each smaller image between its <div> and </div> tags, like this:
<div>
<div> image </div>
<div> image </div>
</div>
That way, when you set the top and left positions of the image divs, they will be relative to the image and not to the entire page (the image might move on the page, this way, the small images moves with it)

Try coding this out, if you get stuck somewhere, we can lend a hand, but this should be a helpful start.

- Ian Paterson

www.degreethree.com/newsite -- almost done!

[FishyMonkey78]

Hm, thanks a lot. Your suggestions got me thinking. I think I'll most likely preload all the images in an array, then just use getElementbyID and change the source through that of the image. It'll will be a snappy easy change.

Either that, or I'll basically do what you said by positioning all the second images to appear and fiddle with visibility. Image maps are gone now, since all the links I want are in a straight line. Easy.

I'll post what I got here when I finish.

[freefall]

Well well I didn't even think of that! Yeah it would be a lot easier to just forget about the image map idea and do them as separate, good idea!

I'm looking forward to your code, good luck!