Firefox doesn't process onmousemove

Discussion in 'Javascript' started by 80s.arcade@videotron.ca, Sep 5, 2006.

  1. Guest

    Hi.

    Please take a look at this page:
    http://tinyurl.com/s2l8w

    In IE6, putting the mouse on each of the two items highlights the word
    in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
    nothing shows when mouse goes over it. Please view the source of that
    simple page (with some JavaScript) to see if you know how I can get
    this to look in Firefox like it does in IE?

    Thanks.
    , Sep 5, 2006
    #1
    1. Advertising

  2. Guest

    Please also let me know if there is another newsgroup that I should
    post this sort of question to. Thanks.

    wrote:
    > Hi.
    >
    > Please take a look at this page:
    > http://tinyurl.com/s2l8w
    >
    > In IE6, putting the mouse on each of the two items highlights the word
    > in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
    > nothing shows when mouse goes over it. Please view the source of that
    > simple page (with some JavaScript) to see if you know how I can get
    > this to look in Firefox like it does in IE?
    >
    > Thanks.
    , Sep 5, 2006
    #2
    1. Advertising

  3. Randy Webb Guest

    said the following on 9/4/2006 9:33 PM:
    > Hi.
    >
    > Please take a look at this page:
    > http://tinyurl.com/s2l8w
    >
    > In IE6, putting the mouse on each of the two items highlights the word
    > in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
    > nothing shows when mouse goes over it. Please view the source of that
    > simple page (with some JavaScript) to see if you know how I can get
    > this to look in Firefox like it does in IE?


    The problem is that your script is written for IE/NN4 era browsers using
    document.layers and document.all. The only reason it even works in IE is
    that it still supports document.all and the test for it. Firefox has
    limited supported for document.all but it will fail on an
    if(document.all) test. Although I personally don't see any reason at all
    for using either one.

    You use the images collection in the imgoff function but for some reason
    you use document.layers/document.all in the imgon function.

    I also don't see why you are having so many different function calls for
    a simple rollover effect.

    function swapImage(imgRef,newSource){
    imgRef.src = newSource;
    }

    And call it as such:

    <img src="originalImage.jpg"
    onmouseover="swapImage(this,'newImageSrc.jpg')"
    onmouseout="swapImage(this,'originalImage.jpg')"
    >


    The problem with the approach you have now is that when there are many
    images on the page, your imgoff function will have to loop through all
    the images and set them when it doesn't need to. The only image that
    won't be in a default state is the one that has the mouse over it. When
    you mouseout, you change it back.


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Sep 5, 2006
    #3
  4. Guest

    Hi. And thanks for your response.

    I just copied that as I was learning many years ago. Time to revise.

    So I just have this code now but IE gives script errors when I put my
    mouse over the bitmaps. What did I miss:

    <HTML>
    <HEAD>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function swapImage(imgRef,newSource){
    imgRef.src = newSource;
    }
    // -->
    </script>
    <TITLE>Sample</TITLE>
    </HEAD>
    <BODY bgcolor="Black"><font size="-1"><BR></font>
    <table border="0">
    <tr>
    <td><img src="images/home.jpg" width=80 height=35 alt="Main Page"
    border="0"
    onmouseover="SwapImage(this,'images/homeon.jpg'),window.status='Main
    Page'" onmouseout="SwapImage(this,'images/home.jpg'),
    window.status=''"></td>
    <td><img src="images/arcade.jpg" width=100 height=35 alt="Classic
    Arcade Machines" border="0"
    onmouseover="SwapImage(this,'images/arcadeon.jpg'),window.status='Classic
    Arcade Machines'"
    onmouseout="SwapImage(this,'images/arcade.jpg'),window.status=''"></td>
    </tr>
    </table>
    </BODY>
    </HTML>


    Thanks.
    Randy Webb wrote:
    > said the following on 9/4/2006 9:33 PM:
    > > Hi.
    > >
    > > Please take a look at this page:
    > > http://tinyurl.com/s2l8w
    > >
    > > In IE6, putting the mouse on each of the two items highlights the word
    > > in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
    > > nothing shows when mouse goes over it. Please view the source of that
    > > simple page (with some JavaScript) to see if you know how I can get
    > > this to look in Firefox like it does in IE?

    >
    > The problem is that your script is written for IE/NN4 era browsers using
    > document.layers and document.all. The only reason it even works in IE is
    > that it still supports document.all and the test for it. Firefox has
    > limited supported for document.all but it will fail on an
    > if(document.all) test. Although I personally don't see any reason at all
    > for using either one.
    >
    > You use the images collection in the imgoff function but for some reason
    > you use document.layers/document.all in the imgon function.
    >
    > I also don't see why you are having so many different function calls for
    > a simple rollover effect.
    >
    > function swapImage(imgRef,newSource){
    > imgRef.src = newSource;
    > }
    >
    > And call it as such:
    >
    > <img src="originalImage.jpg"
    > onmouseover="swapImage(this,'newImageSrc.jpg')"
    > onmouseout="swapImage(this,'originalImage.jpg')"
    > >

    >
    > The problem with the approach you have now is that when there are many
    > images on the page, your imgoff function will have to loop through all
    > the images and set them when it doesn't need to. The only image that
    > won't be in a default state is the one that has the mouse over it. When
    > you mouseout, you change it back.
    >
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    , Sep 5, 2006
    #4
  5. Guest

    Doh, ok, I capitalized Swap by mistake. Works now.
    So now I will work on what do I do to keep the rollover image on when I
    click on an item (which eventually takes me to a html page)?
    Onclick....

    Thanks.

    wrote:
    > Hi. And thanks for your response.
    >
    > I just copied that as I was learning many years ago. Time to revise.
    >
    > So I just have this code now but IE gives script errors when I put my
    > mouse over the bitmaps. What did I miss:
    >
    > <HTML>
    > <HEAD>
    > <script language="JavaScript" type="text/JavaScript">
    > <!--
    > function swapImage(imgRef,newSource){
    > imgRef.src = newSource;
    > }
    > // -->
    > </script>
    > <TITLE>Sample</TITLE>
    > </HEAD>
    > <BODY bgcolor="Black"><font size="-1"><BR></font>
    > <table border="0">
    > <tr>
    > <td><img src="images/home.jpg" width=80 height=35 alt="Main Page"
    > border="0"
    > onmouseover="SwapImage(this,'images/homeon.jpg'),window.status='Main
    > Page'" onmouseout="SwapImage(this,'images/home.jpg'),
    > window.status=''"></td>
    > <td><img src="images/arcade.jpg" width=100 height=35 alt="Classic
    > Arcade Machines" border="0"
    > onmouseover="SwapImage(this,'images/arcadeon.jpg'),window.status='Classic
    > Arcade Machines'"
    > onmouseout="SwapImage(this,'images/arcade.jpg'),window.status=''"></td>
    > </tr>
    > </table>
    > </BODY>
    > </HTML>
    >
    >
    > Thanks.
    > Randy Webb wrote:
    > > said the following on 9/4/2006 9:33 PM:
    > > > Hi.
    > > >
    > > > Please take a look at this page:
    > > > http://tinyurl.com/s2l8w
    > > >
    > > > In IE6, putting the mouse on each of the two items highlights the word
    > > > in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
    > > > nothing shows when mouse goes over it. Please view the source of that
    > > > simple page (with some JavaScript) to see if you know how I can get
    > > > this to look in Firefox like it does in IE?

    > >
    > > The problem is that your script is written for IE/NN4 era browsers using
    > > document.layers and document.all. The only reason it even works in IE is
    > > that it still supports document.all and the test for it. Firefox has
    > > limited supported for document.all but it will fail on an
    > > if(document.all) test. Although I personally don't see any reason at all
    > > for using either one.
    > >
    > > You use the images collection in the imgoff function but for some reason
    > > you use document.layers/document.all in the imgon function.
    > >
    > > I also don't see why you are having so many different function calls for
    > > a simple rollover effect.
    > >
    > > function swapImage(imgRef,newSource){
    > > imgRef.src = newSource;
    > > }
    > >
    > > And call it as such:
    > >
    > > <img src="originalImage.jpg"
    > > onmouseover="swapImage(this,'newImageSrc.jpg')"
    > > onmouseout="swapImage(this,'originalImage.jpg')"
    > > >

    > >
    > > The problem with the approach you have now is that when there are many
    > > images on the page, your imgoff function will have to loop through all
    > > the images and set them when it doesn't need to. The only image that
    > > won't be in a default state is the one that has the mouse over it. When
    > > you mouseout, you change it back.
    > >
    > >
    > > --
    > > Randy
    > > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    , Sep 5, 2006
    #5
  6. Randy Webb Guest

    said the following on 9/4/2006 11:34 PM:
    > Doh, ok, I capitalized Swap by mistake. Works now.
    > So now I will work on what do I do to keep the rollover image on when I
    > click on an item (which eventually takes me to a html page)?
    > Onclick....


    If you are navigating away from the page, then it won't matter will it?

    onclick="thisClicked(this,'clickedImage.jpg')"

    function thisClicked(elemClicked,newSrc){
    elemClicked.onmouseover=null;
    elemClicked.onmouseout=null;
    elemClicked.src = newSrc;
    }

    That will remove the onmouseover and onmouseout event handlers from the
    image so that mousing over them won't change them anymore.

    Still not sure what the point of making an image change when navigating
    away though.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Sep 5, 2006
    #6
  7. Guest

    Oh, let me explain more. This is the top page of a simple frame based
    page. So click on those items will change the bottom frame. Hence,
    when click on the Arcade item, I would put a new frame at the bottom
    and I wanted the Arcade item image to remain to the 'on' one. At this
    point, moving my mouse over the Home would make it highlight but moving
    the mouse over the Arcade would do nothing as it is on that frame
    already. Clicking on Home would then highlight Home permanently with
    the 'on' image and undo the Arcade 'on' image. Thanks.

    Randy Webb wrote:
    > said the following on 9/4/2006 11:34 PM:
    > > Doh, ok, I capitalized Swap by mistake. Works now.
    > > So now I will work on what do I do to keep the rollover image on when I
    > > click on an item (which eventually takes me to a html page)?
    > > Onclick....

    >
    > If you are navigating away from the page, then it won't matter will it?
    >
    > onclick="thisClicked(this,'clickedImage.jpg')"
    >
    > function thisClicked(elemClicked,newSrc){
    > elemClicked.onmouseover=null;
    > elemClicked.onmouseout=null;
    > elemClicked.src = newSrc;
    > }
    >
    > That will remove the onmouseover and onmouseout event handlers from the
    > image so that mousing over them won't change them anymore.
    >
    > Still not sure what the point of making an image change when navigating
    > away though.
    >
    > --
    > Randy
    > Chance Favors The Prepared Mind
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    , Sep 5, 2006
    #7
  8. Randy Webb Guest

    said the following on 9/4/2006 11:57 PM:
    > Oh, let me explain more. This is the top page of a simple frame based
    > page. So click on those items will change the bottom frame. Hence,
    > when click on the Arcade item, I would put a new frame at the bottom
    > and I wanted the Arcade item image to remain to the 'on' one. At this
    > point, moving my mouse over the Home would make it highlight but moving
    > the mouse over the Arcade would do nothing as it is on that frame
    > already. Clicking on Home would then highlight Home permanently with
    > the 'on' image and undo the Arcade 'on' image. Thanks.


    The best that you could do would be to try to set a flag when navigation
    happens and then check that flag onmouse* to see whether to trigger the
    rollover effect.

    onclick - change the image, reset all others, set a flag variable.
    onmouseover - check the variable and act.

    The flag variable could be set to the ID/NAME of the image that got
    clicked. If the current mouseover is that image, then do nothing.


    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Sep 7, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Csaba2000
    Replies:
    6
    Views:
    493
  2. Defacta
    Replies:
    3
    Views:
    461
    Beauregard T. Shagnasty
    Dec 18, 2007
  3. Csaba2000

    Can't cancel .onmousemove in NN

    Csaba2000, Sep 15, 2003, in forum: Javascript
    Replies:
    0
    Views:
    89
    Csaba2000
    Sep 15, 2003
  4. davefromalbury

    firefox onmousemove and dragging issues

    davefromalbury, Jan 9, 2006, in forum: Javascript
    Replies:
    8
    Views:
    207
    Thomas 'PointedEars' Lahn
    Jan 13, 2006
  5. JJA
    Replies:
    0
    Views:
    113
Loading...

Share This Page