Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover & onmouseout not working for appended images

    I have two images that are appended to a div when an image is clicked, and I have set their onmouseover and onmouseout properties to functions that change the source image.

    Code:
                var jPrev=document.createElement("img");
                var jNext=document.createElement("img");
                jPrev.src="http://www.therabbitshome.com/images/prev.png";
                jPrev.id="prev";
                jPrev.onmouseover="prevMouseover()";
                jPrev.onmouseout="prevMouseout()";
                jNext.src="http://www.therabbitshome.com/images/next.png";
                jNext.id="next";
                jNext.onmouseover="nextMouseover()";
                jNext.onmouseout="nextMouseout()";
    Code:
                function prevMouseover(){jPrev.src="http://www.therabbitshome.com/images/prev_MOUSEOVER.png";}
                function prevMouseout(){jPrev.src="http://www.therabbitshome.com/images/prev.png";}
                function nextMouseover(){jNext.src="http://www.therabbitshome.com/images/next_MOUSEOVER.png";}
                function nextMouseout(){jNext.src="http://www.therabbitshome.com/images/next.png";}
    But the images don't change when I hover the mouse over them. Help?? Thx.

    The page is http://www.therabbitshome.com. You have to click "BROWSE ART", then try to hover the mouse over the "PREV" and "NEXT" images to reproduce the problem.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    **WRONG**
    Code:
                jPrev.onmouseover="prevMouseover()";
                jPrev.onmouseout="prevMouseout()";
                jNext.onmouseover="nextMouseover()";
                jNext.onmouseout="nextMouseout()";
    RIGHT:
    Code:
                jPrev.onmouseover=prevMouseover;
                jPrev.onmouseout=prevMouseout;
                jNext.onmouseover=nextMouseover;
                jNext.onmouseout=nextMouseout;
    Your code was simply assigning *strings* to the event handlers. Not functions, at all. The string stuff only is used for inline JavaScript in tags.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    **WRONG**
    Code:
                jPrev.onmouseover="prevMouseover()";
                jPrev.onmouseout="prevMouseout()";
                jNext.onmouseover="nextMouseover()";
                jNext.onmouseout="nextMouseout()";
    RIGHT:
    Code:
                jPrev.onmouseover=prevMouseover;
                jPrev.onmouseout=prevMouseout;
                jNext.onmouseover=nextMouseover;
                jNext.onmouseout=nextMouseout;
    Your code was simply assigning *strings* to the event handlers. Not functions, at all. The string stuff only is used for inline JavaScript in tags.
    oh I see

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    How it works:

    When the browser sees HTML something like
    Code:
    <img onmouseover="prevMouseover()" .../>
    It essentially says to itself "Okay, when I see there is a mouseover event on that <img> then I will invoke [call/eval( )] the JavaScript code in quotes there."

    So, indeed, it does the equivalent of eval("prevMouseover()")

    Or, in true JavaScript terms, it does
    Code:
        jPrev.onmouseover = function() { prevMouseover(); }
    Sort of builds up an extra layer of function there. It does this so that you can, indeed, pass arguments to the function if you need to. Which, of course, you could do in the JS code, thus:
    Code:
        jPrev.onmouseover = function() { prevMouseover(73,'test'); }
    in place of
    Code:
        <img onmouseover="prevMouseover(73,'test');" .../>
    When you don't need to pass any arguments, the short form
    Code:
        jPrev.onmouseover = prevMouseover;
    is simply more efficient.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    funny, cos I could swear that I explained that to you here

    but maybe not?

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    funny, cos I could swear that I explained that to you here

    but maybe not?
    And forgive me for not really understanding it there or here. Really, I'm basically stupid when it comes to this stuff. What I manage to get done happens mostly subconsciously.
    Last edited by transmoderata; 07-20-2012 at 07:03 AM.


  •  

    Posting Permissions

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