HTML Image Map Hover Function Options

[bnew10]

Hello, let me preface my post by stating that I am a beginner when it comes to HTML code. I apologize ahead for my ignorance...

Now my questions, I am in the process of creating an image for the company I work for. Basically, I used Illustrator and have created an image with the goal of "mapping" particular areas of this image to create a "hover" effect. I am not sure if these are the correct terms to describe my goal. None the less, I have about 9 separate areas of this image that I would like a small text box to appear when someone rolls their mouse over each area. The text that appears on the rollover would be short and not too lengthy.

I have read a little into the process of "image mapping", but I do not need the mapped area to send someone to a different URL. I just want some simple text to appear to describe/explain the area of the image that folks are hovering above with their mouse. I am not sure if image mapping is still the process I need to pursue, or if there is a whole different process I need to use to achieve this goal?

Keep in mind I am unfamiliar with HTML terms and process (I went to school in a completely unrelated field) but I have enjoyed doing some very basic editing online. Typically, I have used a composer application to assist me with the technical process of HTML editing. Obviously, my goal would be to add this image to several different areas of our website, and allow this image to function as stated above. It appears that this is possible to do, and I have my image done and ready to edit to reflect the desired function.

If this helps, the image is that of a baseball diamond. The goal is when a customer hovers over a specific position on the field the text box would appear explaining the position further, then vanish when they moved their mouse away from that specific area.

Any help or links that might be helpful will be much appreciated. Thank you all...

[Frederiek]

Have a look at this CSS exemple from Stu Nicholls : http://www.cssplay.co.uk/menu/solar_map.html .
There's also a clickable version, with javascript, at http://www.stunicholls.com/various/solar_map.html .

[bnew10]

Have a look at this CSS exemple from Stu Nicholls : http://www.cssplay.co.uk/menu/solar_map.html .
There's also a clickable version, with javascript, at http://www.stunicholls.com/various/solar_map.html .

I just looked at both links and that is exactly what I had in my mind's eye when I came up with this idea. How difficult are we talking here?

[pandy]

I haven't looked, but it's probably basically the same deal I gave you a simple version of, only this one is pretty. It isn't hard, but you need to familiarize yourself with a few concepts you may not yet know. The display property, how you can show or hide things on :hover and positioning.

As for your other question, title works in all fairly recent browsers. The ones that don't support title are so old it doesn't matter, Netscape 4 and older. To be honest, I'm not sure what other devices than graphical browsers do with title, if they do anything at all.

Why not start with title and then take your time to figure those other things out and you can update when you've got right?

[bnew10]

I haven't looked, but it's probably basically the same deal I gave you a simple version of, only this one is pretty. It isn't hard, but you need to familiarize yourself with a few concepts you may not yet know. The display property, how you can show or hide things on :hover and positioning.

As for your other question, title works in all fairly recent browsers. The ones that don't support title is so old it doesn't matter, Netscape 4 and older. To be honest, I'm not sure other devices than graphical browsers do with title, if they do anything at all.

Why not start with title and then take your time to figure those other things out and you can update when you've got right?

I definitely agree. That was what I did not know about the first option you suggested. I did not know if one could edit the font, add a border, etc. to the "simple" title option. It appears that it is possible in HTML correct? I will just try and teach myself as I go and see if I can eventually, slowly upgrade the appearance. I just thought when Frederiek suggested those two different ideas that they would not be possible for me to do using HTML, and would require knowledge in CSS and/or Javascript.

[pandy]

Nope. You can't change a thing about how the title is displayed.

[bnew10]

Nope. You can't change a thing about how the title is displayed.

Ah, I think I misunderstood before. I am looking at the code now you provided and am going to try and edit it to reflect what I am trying to do. I may need some help for some basic stuff and I hope you won't mind if I pick your brain a bit. You have been extremely helpful!

One last question, are there situations were CSS would not be supported on our site? I have only ever written in basic HTML and do not know if our site will support CSS...