balloontip ie issue

[jbavington]

1) Script Title:
Rich HTML Balloon Tooltip

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

3) Describe problem:

Hi,

On my site http://www.ebav.co.uk/travian/ everything seems to work fine in Firefox. However in IE7 when I try and view a tooltip using your script it seems to fail with the following message:

Line 64
Char 1
Error Object doesn't support this property or method
Code 0
File index.html

and again...

Line 1
Char 1
Error 'dropmenuobj' is undefined
Code 0
File index.html

I have made the following changes to the file (basically so I could get multiple onmouseovers):

This code has been changed ...


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
}
}
}

to this ...


function initalizetooltip(){
var all_links=document.getElementsByTagName("area")
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

function balloontipdoit(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}

if (window.addEventListener)
all_links[i].addEventListener("mouseover", balloontipdoit, false)
else if (window.attachEvent)
all_links[i].attachEvent("onmouseover", balloontipdoit)

if (window.addEventListener)
all_links[i].addEventListener("mouseout", delayhidemenu, false)
else if (window.attachEvent)
all_links[i].attachEvent("onmouseout", delayhidemenu)

}
}
}

Nothing else has been changed except for the directory the arrow images sit in.

Thanks for your help!
James

[jscheuer1]

I see your changes also support a switch from tips used over a link to tips used over an area in an image map. The basic problem with your changes for IE is that it doesn't support the use of the 'this' keyword with events attached using attachEvent. At least not in the way that would be expected. The 'this' keyword, which would ordinarily refer to the element firing the event, now refers to the window object. You could do it like so, using the apply() method to spoof IE into using 'this' in the same way as all other browsers do:


function initalizetooltip(){
var all_links=document.getElementsByTagName("area")
if (enablearrowhead){
tiparrow=document.createElement("img")
tiparrow.setAttribute("src", arrowheadimg[0])
tiparrow.setAttribute("id", "arrowhead")
document.body.appendChild(tiparrow)
}
var balloontipdoit=function(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}
if(!window.addEventListener&&window.attachEvent)
var bindtip=function(el){
var t=function(){balloontipdoit.apply(el);}
el.attachEvent('onmouseover', t);el.attachEvent('onmouseout', delayhidemenu);
}
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
if (window.addEventListener){
all_links[i].addEventListener("mouseover", balloontipdoit, false)
all_links[i].addEventListener("mouseout", delayhidemenu, false)
}
else if (window.attachEvent){bindtip(all_links[i]);}
else {all_links[i].onmouseover=balloontipdoit; all_links[i].onmouseout=delayhidemenu;}
}
}
}

[jbavington]

Wow, now that was both fast and impressive!

And... it works!

Thanks John