Totally different on mouseover behavior in IE

[tblue]

I've created this rollover menu that works just perfectly in Firefox, doesn't work at all in Chrome, and rolls over to the entirely wrong place in IE.


The JS is

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this 
// notice with the code.
// var image information object
var mloi=new Object();
// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
{
imgInfo.opts[arguments[i]]=new Image();
imgInfo.opts[arguments[i]].src = arguments[i+1];
}
mloi[arguments[0]] = imgInfo;
}
// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
{   
link.imgName    = imgName;
link.onmouseout = swapBack;
link.swapReady  = true;
}
document.images[imgName].src=mloi[imgName].opts[optName].src;
}
function swapBack()
{document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}
//-->
</SCRIPT> 

I placed this on the page at the default image:

<img src="images/mullan_house_670.jpg"  width=670 height=500 alt="MLco" name="showservice">
<br />

<script type="text/javascript">
setswap("showservice",
   'des', 'images/design_670.jpg',
   'wal',      'images/walks_670.jpg',
   'maint',      'images/maint_670.jpg',
   'light',       'images/lighting_maple_670.jpg',
   'hol',           'images/holiday_670.jpg',
   'kitch',             'images/kitchen_670.jpg',
   'spec',                'images/specialty_670.jpg',
   'drain',                 'images/drainage_670.jpg'
   
   );

</script> 

And then within the HTML, I have these links: (there are 8 but I only listed 2 as examples.)

<div id="design">
<a href="design.html" onmouseover="swap(this,'showservice','des')"><img src="images/thumb_design.jpg" name="showservice" width="70" height="70"></a>

</div>
  
  
<div id="walks">
<a href="walks.html"  onmouseover="swap(this,'showservice','wal')">
<img src="images/thumb_walks.jpg" name="showservice" width="70" height="70" ></a>


</div> 

In IE, the rollover event takes place in the last thumbnail. I'm wondering if I have the setswap function in the wrong place?


Please help! I have searched for an answer and stayed up almost all night trying to figure this out. I am new to JavaScript but trying VERY HARD to learn and not just copy scripts.

[Kor]

You have given all your images the same name, thus in your code:

document.images[imgName]

will refer a collection of elements, not a single element.

You code is medieval. Try to find or code yourself a modern one. Use individual ids, not names, and DOM methods.

[tblue]

I know, I know. 1998! I have searched all over for a code that will work for this effect and can't seem to find one. I have been up all night the past 2 nights reading JavaScript tutorials but I am still not up to writing my own. My client specifically asked for this type of menu (scroll over a thumbnail and you see a large photo in the column next to it. I first tried the Jeremy Keith script:

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */
function showPic(whichpic) {
  if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
  } else {
  return true;
  }
}

var previousToggle=null;
function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block";
    if(previousToggle)previousToggle.style.display="none";
    previousToggle=e;
  }
  return true;
} 

which was fine, except that I couldn't figure out how to make it showpic on mouseover and go to new URL (basic link to a page) onclick.
Here's a link in the body:

<a onMouseover="toggleMe('para1'); showPic(this); return false;"  href="images/commercial_600.jpg" title="blah blah blah">
<img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a> 

where I want the <a> to be to a new page, not the larger img.

Can you help?

[Kor]

which was fine, except that I couldn't figure out how to make it showpic on mouseover and go to new URL (basic link to a page) onclick.
Here's a link in the body:

<a onMouseover="toggleMe('para1'); showPic(this); return false;"  href="images/commercial_600.jpg" title="blah blah blah">
<img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a> 

<a onmouseover="toggleMe('para1'); showPic(this)"  href="newURLhere" title="blah blah blah">

[tblue]

Right, that's what I thought, but then the large img that is supposed to show in the new column on mouseover disappears--

Shouldn't the

onmouseover="toggleMe('para1'); showPic(this); return false;" 

be responsible for the showing the larger pic?

I really appreciate anything you can suggest.

[Kor]

OK. Even it is a sort of hack , here you are a quick solve:

<a onmouseover="toggleMe('para1'); showPic(this)"  href="images/commercial_600.jpg" title="blah blah blah" onclick="location.href='newURLhere';return false">
<img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a>

[tblue]

Nope, unfortunately--doesn't work, and doesn't work differently in every browser.

I just keep wondering why showPic isn't doing its job. toggleMe is working just fine. But where does showPic get this

The link:

<a onmouseover="toggleMe('para1'); showPic(this); return false;" href="design.html"> <img src="images/thumb_design.jpg" width="70" height="70"></a> 

The script again:

function showPic(whichpic) {
  if (document.getElementById) {
    document.getElementById('placeholder').src = whichpic.href;
    if (whichpic.title) {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
  } else {
  return true;
  }
}

var previousToggle=null;
function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block";
    if(previousToggle)previousToggle.style.display="none";
    previousToggle=e;
  }
  return true;
} 

[Kor]

Let's take it otherwise. Describe your aim as detailed as you can, post your HTML structure, and we might create a code customized for your special needs.