tooltip hotspot

[shivam0101]

Hello,

I have downloaded tooltip from http://www.dynamicdrive.com/dynamicinde ... ooltip.htm. It works fine. I want it to apply to image map tag. I tried,

<map name="Map">
<area shape="rect" coords="12,25,151,107" href="#" rel="balloon1">
</map>

<div id="balloon1" class="balloonstyle" style="width: 350px; background-color: lightyellow">
Tooltip sample
</div>

It's not working.

Can someone tell me how to do it?

Thanks

[harrierdh]

Despite Dynamic Drive's documentation, this code only works on <a tags out of the box. In theory it could work on any tag. You would have to modify their .js library to do this though. In this code below, from their .js in the second line you can see it only selects <a tags. I don't have time to try it. You could try changing that to

var all_links=document.getElementsByTagName("MAP");

Code: Select all

function initalizetooltip(){
var all_links=document.getElementsByTagName("a")
if (enablearrowhead){
tiparrow=document.createElement("img")
tiparrow.setAttribute("src", arrowheadimg[0])
tiparrow.setAttribute("id", "arrowhead")
document.body.appendChild(tiparrow)
}
for (var i=0; i<all_links.length; i++){
if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
all_links[i].onmouseover=function(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}
all_links[i].onmouseout=delayhidemenu
}