Changing image in just one area of a map

[gregor6]

Hi to you all!
Could anybody help me with that problem?
I have a mapped image and I want to change mapped parts of the image.
For example when I get a cursor over one area the image in that area would change for another (the same size of course).
Or for example I have mapped solar system and after clicking one of the planet the planet will change color (so the image will be switched just in that area).
Is that achievable?
Thanks a lot for your help!

[Raffles]

Yes it's achievable, but I wouldn't do this with image maps. Image maps just use one single image for the background, with the <area> elements being clickable "hotspots" laid on top of the image.

I would simply have a background image in a DIV, then put all the planets in as individual images. Using CSS, position them absolutely, with respect to the DIV. Then using javascript it's a simple task to attach onmouseover and onmouseout event handlers to the images to change their src value.

[gregor6]

thanks a lot But is there no threat that in different browsers it would look differently?

[Raffles]

Up until about 2005, maybe. Nowadays no, even IE6 can cope with absolute positioning without throwing a fit. What you want to do is not especially complicated. If you have a go at it, i.e. the HTML and CSS bits, I'll help you with the JS.

[gregor6]

I've made it! Thanks a lot
Could you please say only what kind of program do you use for positioning?

[Raffles]

Er... a text editor? I just write the CSS by hand.

[gregor6]

Yes, css in text editor but to create maps (where it is handy to see all X Y positions of the areas).

[Raffles]

I haven't made an image map for many years, but when I did in the past I used dreamweaver.