...

View Full Version : onmouseover & onmouseout not working for appended images



transmoderata
07-20-2012, 12:46 AM
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.


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()";


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.

Old Pedant
07-20-2012, 12:56 AM
**WRONG**


jPrev.onmouseover="prevMouseover()";
jPrev.onmouseout="prevMouseout()";
jNext.onmouseover="nextMouseover()";
jNext.onmouseout="nextMouseout()";


RIGHT:


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.

transmoderata
07-20-2012, 01:01 AM
**WRONG**


jPrev.onmouseover="prevMouseover()";
jPrev.onmouseout="prevMouseout()";
jNext.onmouseover="nextMouseover()";
jNext.onmouseout="nextMouseout()";


RIGHT:


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

Old Pedant
07-20-2012, 01:29 AM
How it works:

When the browser sees HTML something like


<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


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:


jPrev.onmouseover = function() { prevMouseover(73,'test'); }

in place of

<img onmouseover="prevMouseover(73,'test');" .../>

When you don't need to pass any arguments, the short form


jPrev.onmouseover = prevMouseover;

is simply more efficient.

xelawho
07-20-2012, 04:38 AM
funny, cos I could swear that I explained that to you here (http://www.codingforums.com/showthread.php?t=265774)

but maybe not? :confused:

transmoderata
07-20-2012, 07:00 AM
funny, cos I could swear that I explained that to you here (http://www.codingforums.com/showthread.php?t=265774)

but maybe not? :confused:

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum