Balloon Tooltip + Swap Image

[slyredfox]

1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...oontooltip.htm

3) Describe problem: The script works as expected - but, I'd like to add an additional feature... Swap Image - I set the balloon tip to display when rolled over an image. On that image I'd like to have a "swap image / swap image restore". When I add the balloon tip to the image - the rollover effect is "negated" - How can I combine these two effects. Below is a portion of the code I have ...

<!--Sample corresponding tooltips-->

<div id="GALNAV1" class="balloonstyle" style="width: 150px; background-color: #6666CC;">
<b>Title of project</b><br>
Project Description
</div>

<!--The image link with tooltip + swap image -->

<a href="GALLERY_ONE" onMouseOver="MM_swapImage('GALNAV1','','ART_GALLERY/ICON_IBC_ON.jpg',1)" onMouseOut="MM_swapImgRestore()" rel="GALNAV1"><img src="ART_GALLERY/ICON_IBC_OFF.jpg" alt="CD" name="GALNAV1" width="42" height="42" hspace="0" vspace="0" border="0" id="GALNAV1"></a>

[jbavington]

Hi,

Saw this while looking for another solution so thought i would help!

In the js file replace:

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

with...

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

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)

}
}
}

What this does is basically add an event listener for mouseovers and adds balloontips function to the mix (meaning both your swap image and balloontip run fine).

I am not a coder but this works fine for me in Firefox. I can't however get it to work in IE (but then I haven't tried very hard).

Have fun!

[jscheuer1]

This will work much better:

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

This will still overwrite your rollovers if the browser doesn't support either addEvent or attachEvent (most do support one or the other). A simpler approach (if your rollovers are to image tags) would be to not worry about changing the code for the script. Just add your rollover effects directly to the image tags.