Changing images with mouseover event

The following code changes an image on mouseover and works fine in ie4, how can I make it work in netscape?

<!--Html Document Reference index.htm Nick's Website-->
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

if (document.images) {
      toc01on = new Image();
      toc01on.src = "ball-glass-red.gif";
      
      toc01off = new Image();
      toc01off.src = "ball-glass-blue.gif";
      }

function img_act(imgName) {
        if (document.images) {
            imgOn = eval(imgName + "on.src");
            document [imgName].src = imgOn;
      }
}
function img_inact(imgName) {
        if (document.images) {
            imgOff = eval(imgName + "off.src");
            document [imgName].src = imgOff;
      }
}
//-->
</SCRIPT>

</HEAD>
 
<BODY>

<DIV ID="ball1div" STYLE="position:absolute; left:100; top:190; width:30">
<A HREF="database/home.htm" onMouseover="img_act('toc01')" onMouseout="img_inact('toc01')"><IMG SRC="ball-glass-blue.gif" BORDER="NONE" NAME="toc01"></A>
</DIV>
       
</BODY>
</HTML>
LVL 1
ncwAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
jeremy522Connect With a Mentor Commented:
This is a very strange problem I like all of the scripting it looks like maybe someone knows what they are doing. I have spent a little time on this script, see below that should work for you. I don't have netscape on this computer but it is IE5 so it should work with netscape4

<html>
<head>
</head>
<body bgcolor="white">
<center>
<h1>Jeremy Church</h1>
    <a href="" onMouseOver="document.pic1.src='bubble2.gif' "
        onMouseOut="document.pic1.src='bubble1.gif'">
    <img src="bubble1.gif" border=0 name="pic1"></a><p>
</body>
</html>
0
 
oubelkasCommented:
Well, problem here is that the image is placed in a layer and NS interpretes layers differently than IE does. The code gets a little more complicated because you'll have to check first if the browser used is NS and then access the properties of that layer, thus now the image. The most simple solution would be of course, removing the layer. Oh, one little tip :

document [imgName].src = eval(imgName + "off.src");

is more efficiently programming than

imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;

;)

Joseph
0
 
messentaryCommented:
I believe what is happening is Netscape is ignoring the code.  You are using a style witin the <div> code.  Netscape does not support that kind of style.  If you were to remove that, it should and will work.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
oubelkasCommented:
Yes, messentary, you're right about removing that and that it'll work then, but then the whole use of the layer is gone. I believe the layer's there to postion the image. BTW, netscape DOES accept STYLE="position:absolute; left:100; top:190; width:30". I use it often in layers so this shouldn't be the problem. ;)

Joseph
0
 
nettromCommented:
Netscape groks the style added to the DIV just fine.

what I think ncw needs to do though to change the definition of his image, and then add document.layer['ball1div'] to the start of that definition if the browser is Netscape.  the hardcoded way of doing it would be:

function img_act(imgName) {
  if (document.images) {
    imgOn = eval(imgName + "on.src");
    if(document.layers) {
      document.layers['ball1div'].document.images[imgName].src = imgOn;
    } else {
     document.[imgName].src = imgOn;
    }
  }
}

function img_inact(imgName) {
  if (document.images) {
    imgOff = eval(imgName + "off.src");
    if(document.layers) {
      document.layers['ball1div'].document.images[imgName].src = imgOn;
    } else {
      document [imgName].src = imgOff;
    }
  }
}
0
 
vbyuvalCommented:
In NS you have to put the image on form
like any other object in NS .
0
 
SadManCommented:
Try the following bit of code:

Put the following code in your header:

<script language="JavaScript"><!--
if( document.images)
{
  img_on  = new Image();
  img_on.src = "img_on.gif"
  img_off  = new Image();
  img_off.src = "img_off.gif"
}

function di20( id, newSrc )
{
  var theImage = FWFindImage( document, id, 0 );

  if( theImage )
  {
    theImage.src = newSrc;
  }
}

function FWFindImage( doc, name, j )
{
  var theImage = false;

  if( doc.images )
  {
    theImage = doc.images[name];
  }

  if( theImage )
  {
    return( theImage );
  }
 
  if( doc.layers )
  {
    for( j = 0; j < doc.layers.length; j++ )
    {
      theImage = FWFindImage( doc.layers[j].document, name, 0 );

      if( theImage )
      {
        return theImage;
      }
    }
  }
 
  return( false );
}
// --></script>

and at the image:

<A href="index.html" onmouseout="di20('logo',img_off.src);" onmouseover="di20('logo',img_on.src);">
<IMG border=0 id=logo src="wdlogo.gif"></A>

If you wanted to change more than one image at a time then just add more di20() calls in the onmouseover and onmouseout events.

I got it from an article on cross browser scripting.

Hope this helps.

Also check out dan steinman's web site at:

www.danstienman.com
0
 
ncwAuthor Commented:
vbyuval: I don't see how your text helps me.

jeremy522: I have used your code in conjunction with layers to position the images and it works well with ie4 and nsn without need for javascript:

<div STYLE="position:absolute;left:240;top:224"><a href="http://www.experts-exchange.com/" onMouseOver="document.pic2.src='../images/red-dot.gif' " onMouseOut="document.pic2.src='../images/cyan-dot.gif'"><img src="../images/cyan-dot.gif" border=0 name="pic2"></a>
</div>

 
0
 
jeremy522Commented:
I am glad to see that I could help. Always remember to keep the code simple. If you don't have to use JavaScript don't, it's just a big waste of time.
0
All Courses

From novice to tech pro — start learning today.