Tooltip/Swap Image Restore Conflict - Help Needed

[irthom]

I would like to know how to resolve an issue that I am having with some images. Basically I am using javascript tooltips on images AND swap image/restore. The tooltip shows up fine and the image swaps initially. But, the image doesn't restore on mouse out. Is there a way to fix this so I can use the swap image restore and the tool tip?

<snipped example url>

Essentially, I would like the blank iPhone image (the one that is there when you access the page initially) to restore when the mouse leaves a thumbnail.

This is the JS that is being used:

</script>
<style type="text/css">
/*<![CDATA[*/
 img.c3 {border: none;}
 h1.c2 {text-align: center}
 div.c1 {text-align: center}
/*]]>*/
</style>
<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 0px;
font-size: 10px;
border: black solid 3px;
font-family: arial;
position: absolute;
 background-color: #000000;
 color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
<!--
// <snipped>
var theObj="";
function toolTip(text,me) {
 theObj=me;
 theObj.onmousemove=updatePos;
 document.getElementById('toolTipBox').innerHTML=text;
 document.getElementById('toolTipBox').style.display="block";
 window.onscroll=updatePos;
}
function updatePos() {
 var ev=arguments[0]?arguments[0]:event;
 var x=ev.clientX;
 var y=ev.clientY;
 diffX=24;
 diffY=0;
 document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
 document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
 theObj.onmouseout=hideMe;
}
function hideMe() {
 document.getElementById('toolTipBox').style.display="none";
}
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_callJS(jsStr) { //v2.0
 return eval(jsStr)
}
//-->

... and this is the html code for each thumbnail:

<td width="150" height="179" align="center" valign="top"><span id="toolTipBox" width="150"></span><a href="wallpaper/ip_wp_5/ip_wp_5_php.php"><img src="wallpaper/thumbs/ip_wp_5.jpg" name="thumb_5" width="119" height="179" border="2" class="border" id="thumb_5" onmouseover="toolTip('Street Art, Belfast',this);MM_swapImage('iphone_full','','wallpaper/rollover_images/ip_wp5_rollover.png',1)" onmouseout="MM_swapImgRestore()"></a>
 </div></td>

I would be delighted to hear about a more simple way to do this by the way.

I should say also that I am something of a newbie when it comes to this so I would greatly appreciate any help, and your patience.

Many thanks indeed.

[edited by: whoisgregg at 10:56 pm (utc) on May 7, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] [/edit]

[whoisgregg]

Welcome to WebmasterWorld, irthom!

We don't allow URL drops, even for example pages. You've already done an excellent job of posting the relevant code, so we should be able to debug from here. :)

Basically, whenever you assign an event like this:

 theObj.onmouseout=hideMe;

You're overwriting any existing onmouseout events. Now you can easily fix this a couple different ways. First you can create an anonymous function that wraps the two onmouseout functions you want to call:

 theObj.onmouseout=function(){ hideMe(); MM_swapImgRestore(); }

Second, (and probably better) you could use the addEventListener function to simply add another function without having to manage what events are already attached:

 theObj.addEventListener('mouseout', hideMe);

Please post back if you run into trouble with either method. :)