Mouseover not working in FF

**captsig** · 12-25-2009 11:07 AM

I'm like a dog with a bone, there's got to be something wrong with what I'm doing. The following code works in IE but not FF. It's a "simple" mouse rollover --change a picture--problem:

I detect the event and call for the function, passing the relevant param.s

<a href="contact.php" ><img src="buttons/contact_over.png" alt="contact" id="contact" onMouseOver=rollimg(1, 'contact'); /></a>

This is the preloaded array of images:

window.onload=setarray;
function setarray()
{
img_ary=new Array()

img_ary[0]=new Image();
img_ary[0].src="buttons/home_up.png";
img_ary[1]=new Image();
img_ary[1].src="buttons/contact_up.png";
img_ary[2]=new Image();
img_ary[2].src="buttons/about_up.png";
img_ary[3]=new Image();
img_ary[3].src="buttons/bk_up.png";
}

Finally, the function that is called:

function rollimg(num, img_id)
{
var num=parseInt(num);
var orig_img=document.getElementById(img_id);
var orig_src=orig_img.src;
var roll_img =new Image();
roll_img.src=img_ary[num].src;
orig_img.onmouseover=function ()
{
orig_img.src=roll_img.src;
}
orig_img.onmouseout=function()
{
orig_img.src=orig_src;
}
}

I know that FF and IE detect events differently but I've not been able to tract down the relevant discussion about this issue.

Any help is greatly appreciated.

captsig

**coothead** · 12-25-2009 01:33 PM

Hi there captsig,

why are you attempting to do this with javascript when CSS is the better method to use?

coothead

**captsig** · 12-25-2009 06:04 PM

I don't know... I know you suggested CSS, I guess I'm stubborn. It just seems to me it should work in FF if I only knew right magic.

**vwphillips** · 12-26-2009 06:39 AM

I tested this and it works with FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
window.onload=setarray;

function setarray(){
 img_ary=new Array()
 img_ary[0]=new Image();
 img_ary[0].src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
 img_ary[1]=new Image();
 img_ary[1].src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif";
 img_ary[2]=new Image();
 img_ary[2].src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif";
 img_ary[3]=new Image();
 img_ary[3].src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif";
}


function rollimg(num, img_id){
 var num=parseInt(num);
 var orig_img=document.getElementById(img_id);
 var orig_src=orig_img.src;
 var roll_img =new Image();
 roll_img.src=img_ary[num].src;
 orig_img.onmouseover=function (){
   orig_img.src=roll_img.src;
 }
 orig_img.onmouseout=function(){
  orig_img.src=orig_src;
  }
}

/*]]>*/
</script></head>

<body>
<a href="contact.php" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" alt="contact" id="contact" onMouseOver="rollimg(1, 'contact');" /></a>
</body>

</html>

**captsig** · 12-26-2009 10:40 AM

Thanks for your responses, coothead and vwphillips; I'll drop your code in and see if it will work on my page; coothead, I did look at CSS sprites and got them working as a back up if this js continues to aggravate me. Thanks again both of you.

captsig

Thread: Mouseover not working in FF

Thread Tools

Display

Mouseover not working in FF

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions