www.webdeveloper.com
Results 1 to 5 of 5

Thread: Mouseover not working in FF

  1. #1
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161

    Mouseover not working in FF

    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

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there captsig,

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

    coothead

  3. #3
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles