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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.