Tooltip/Swap Image Restore Conflict - Help Needed

[irthom]

Hello,

 

First of all I am new to this forum so many thanks indeed for any help.

 

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 shoes 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?

 

Here's the link to the page:

 

http://www.eyethomson.com/wallpaper/...per_index.html

 

Many thanks indeed.

[Maq]

Your link is misspelled.

[irthom]

My apologies.  This is the correct link:

 

http://www.eyethomson.com/wallpaper/iPhone_wallpaper/iphone_wallpaper_index.html

 

Many thanks indeed for your assistance.

 

Regards

[Ken2k7]

Can you post the JavaScript you're using for that?

[irthom]

Here is the JS for that page:

 

<script type="text/javascript">

//<![CDATA[

<!--

 

//-->

//]]>

 

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

</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">

<!--

/* This script and many more are available free online at

The JavaScript Source!! http://javascript.internet.com

Created by: Saul Salvatierra :: http://myarea.com.sapo.pt

with help from Ultimater :: http://ultimiacian.tripod.com  */

 

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)&&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[n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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)

}

//-->

 

Many thanks for all your help.

[Ken2k7]

Use

tags please.

[irthom]

<script type="text/javascript">
//<![CDATA[
<!--

//-->
//]]>

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
</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">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com  */

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)&&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[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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)
}
//-->

[Ken2k7]

Okay... that doesn't tell me much. Can you post the relevant HTML (the one the calls the swap functions)?

[irthom]

Hello,

 

On the page ther are twelve images, each with the same javascript attached.  This is the typical html:

 

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

 

Many thanks for your help.

[Ken2k7]

When you restore an image, why are you looping? Wouldn't you just set it back to the black background the iPhone had by default? I'm sure you know the URL to the image.

[irthom]

Not sure what you mean.  The idea is that when the image rolls out the default blank iPhone is replaced.  It is a separate png file.  Each thumbnail has its own rollover.  Is the problem the fact that two mouse out events are being called at once?

[Ken2k7]

Well this can be done with a few simple functions.

 

Give the iPhone screen element an ID. I'll use "e".

 

function MM_swapImgRestore () {
     document.getElementById("e").src = "default.png";
}

function MM_swapImage (id, image_url) {
     document.getElementById("e").src = image_url;
}

 

<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')" onmouseout="MM_swapImgRestore()">

 

Obviously I don't know what the '' and the 1 parameters do. But I think that should be fine, right? I don't see the reason behind all those for loops. They may be slowing things down.

[irthom]

Is it a question of placing the function that you posted in the HEAD section of the page and then keeping the HTML code as is?  I understand what you are saying.  The way that I have done it is very bloated.

 

You have been a great help, many thanks.

[Ken2k7]

You don't have to use mine. My point was that your functions should get to the point because you're calling them so much. If it's caught in a mouseover loop upon mouseout, then it's no good. But yeah, modified it a bit and it should do fine!

 

If you want any more help, post your updated code and I can give it a performance check.