Tooltips for Image Maps?

[Clayton91]

Hi guys
My skill level is very low (beginner). This is my first webpage. I've created an image map. I would like to have the areas of the image map have tooltips - so when someone's mouse goes over each particular area, a tooltip with text comes up. I'd like the tooltip to look something like these tooltips:

http://sandbox.leigeber.com/tooltip/

except I'd like these to be for my image map, and not for text as they are in the example given. Could you guys point me in the right direction/offer advice as to how I could achieve this affect?

[HotNoob]

well the basic tooltip is to just use HTMLs title attribute
for example

Code: Select all

<img src="blah" title='Tool Tip'>


The one provided in the example is made with javascript;
if you want you can just copy it over.

The way the tool tip on that site works, is by calling a function when the mouse is over the link and when its out:

Code: Select all

<img scr="blah" onmouseover="tooltip.show('Tool Tip');" onmouseout="tooltip.hide();>

However, you will need to do a couple things for that to work.

first you will need the javascript for it:
[url]http://sandbox.leigeber.com/tooltip/script.js[url]
right click and save the links target

then upload it to your server in the same directory as the page you want the tool tip to be

Then in that page, put this in the head tags

Code: Select all

<script type="text/javascript" language="javascript" src="script.js"></script>


---
if you want to make your own from scratch, i suggest you just look at the script.js file to give yourself an idea on how to do it.