Rollover Image Map ?

[two4god07]

I understand that an image map is when you can put several links inside of one image by send the links to coordinates

But how do you cause different parts of the image to be rollover

Like If I have an image of a bear for ex

I rollover his head and his mouth opens

I roll over his paw and his claws unsheath (thats not what I want, it's just an example)

[swa66]

For some ideas on how to do it indirectly using css see [webmasterworld.com...]
To do it directly I'm afraid you'll need to seek help from javascript.

[alt131]

Hi two4god07,
and welcome to webmasterworld ;)

One way to do this is using the html elements <map> and <area> (w3schools have more information), but the technique can cause accessibility problems and can be really tricky to figure.

It has become really common to simulate the effect using css - a search for "css image maps" will bring up many pure css/ css + javascript examples. Also check "stu nicholls" for lots and lots of examples of ways to manipulate links, images and hover pop-ups to get the effect you want. (Just be careful of the older examples as they support legacy browsers that are nolonger required, or use "hacks" instead of putting ie corrections into conditional comments like the newer examples.)

[edit]owner edit - spelling[/edit]

[edited by: alt131 at 4:17 am (utc) on Dec. 29, 2008]

[two4god07]

thank you for all your help

I'm an intermediate html designer and a beginner css

javascript.. well.. I can read it a little but writing is still out of reach

I just got out here and learned that everything I was taught in the two years of webpage design i took in school was wrong, and now I have to relearn it all

[alt131]

I just got out here and learned that everything I was taught in the two years of webpage design i took in school was wrong, and now I have to relearn it all

Knowledge is never wasted!
There are many ways to approach coding - unfortunately - but the more techniques you know, the better choices you can make about how to deliver content to your users.
Stick with it ;)