Setting onmouseover event on images does not work

[inbaron]

I'll try to present the problem in the most simple form:

I have an array of elements on the page - "elmts". I have another element "controller" with a onmousedown handler that sets a mouseover event on "elmts". For simplicity, the mouseover function just displays a message:

function onmouseDownOnController(){
for var i = 0; i < elmts.length; i++){
elmts.onmouseover = mouseoverOnElmts;
}
}
function mouseoverOnElmts(){
alert("mouse over happened")
}

The array "elmts is either an array of <div> elments or <IMG> elements, all have id's so I can get the elements using document.getElementById.

Now, when "elmts" is an array of <div> elements, this work nicely. I click on "controller" then I move the mouse without releasing it to one of the "elmts" and the message "mouse over happened" pops up.

When "elmts" is an array of <IMG> objects I get a different behavior. When I click on "controller" and move the mouse to one of the images without releasing the mouse, nothing happens. Only after I release the mouse and then move to one of the images, the message pops up.

Why the onmouseover for the images is not activated while I still have the mouse down but it does so for divs?

Help would be appreciated.

Thanks

 

[tviman]

Your function knows nothing about elmts. Pass the value of elmts as a parameter to the function. Also, shouldn't this line:

elmts.onmouseover = mouseoverOnElmts;

be this?:

elmts.onmouseover = mouseoverOnElmts();

There's always a better way. The fun is trying to find it!

 

[inbaron]

Well, unfortunately, this is the right way to do it. When you assign an handler programtically this way, you cannot pass parameters (a known limitation). Also, you should not include the parenthesis, just the function name.

 

[tviman]

When you assign an handler programtically this way, you cannot pass parameters (a known limitation)

Sure you can.

you should not include the parenthesis, just the function name

If you don't, your script thinks that the function name is a variable, which in this case, is never declared or assigned a value.

There's always a better way. The fun is trying to find it!

 

[inbaron]

Hi Tviman

Thanks for trying to help.
Unfortunately, I have to insist that this is the right way to assign handler programtically. Javascript consider functions as variables of object type and what you call a variable name is exacltly that, the function object is a variable.
Try it and you see what I mean. If you include parenthesis in he function name, you get an error message.

Thanks

 

[tviman]

I apologize for a symantics error... I still say you need to pass the value of elmts as a parameter TO THE FUNCTION, not the event handler. That way, your function will know what elmts is. As it stands, unless you've declared elmts globally then your function has no idea what elmts is.

As far as the parens in the mouseoverOnElmts function, I can't find any reference in Javascript 1.3 or 1.5 that shows that calling a function strictly by it's name is proper. In fact, both of these documents state that the proper way to call a function is with the function name with any arguments INSIDE the parens. So I maintain that without the parens, your function has no knowledge of a function by that same name. (Maybe this is true if you defined the function INSIDE of another function?)

Hope you can get it working....

There's always a better way. The fun is trying to find it!

 

[inbaron]

Sorry for not making it clear. The elmts array was declared globally and populated before calling the functions.

 

[theboyhope]

Just thought I'd chip in to clear one little issue up. When you're registering an event handler you do not use brackets.

Without brackets the entire function is registered but not executed, which is the way it should be.

If you use brackets then the function will execute and the result is assigned to onclick.

 

[kaht]

tviman,

Perhaps you should check out: "Example 10-1. Assigning a JavaScript Event Handler" on this page

http://skaiste.elekta.lt/Books/O'Reilly/Bookshelfs/books/webdesign/action/ch10_06.htm

inbaron,

Your code looks fine, I'd suggest posting everything from a "view source" on the page so that we can use it to debug.

-kaht

 

[tviman]

kaht... Thanks for the heads-up but your link refers to FLASH Actionscripting. Although similar, and the example shown does call the function with just the function name, it's not being called from within a user-defined function but rather the onload event handler outside the scope of a user-defined function. If it were called from within a user-defined function, the scope would be limited to the calling function and would never look outside of itself for the function.

There's always a better way. The fun is trying to find it!

 

[inbaron]

Thanks to all of you trying to help.
I managed to reduce the problem to one simple question - why onmouseover event on one image is not triggered when you click first on another image.

Here is a very simple HTML page (you'll have to provide two images of your own)
<html>
<head>
<script>
function onmouseOverFunc(){
window.status = 'I am Over Image 1'
}
function onmouseOutFunc(){
window.status = ''
}
</script>
</head>
<body >
<IMG name = 'img1' onmouseover ="onmouseOverFunc()" onmouseout = "onmouseOutFunc()" SRC="./img/message_icon.gif" >
<br><br>
<IMG name = 'img2' SRC="./img/message_icon.gif">
</body>
</html>


I use IE6.0

place the mouse over iamge1 and you see the expected messages in the window status bar.

Click anywhere on the page, don't release the mouse and drag it to image 1. The message appears as expected.

Now click on image2, don't release the mouse and drag it to image 1. The message does not appear, the mouseover event is not triggered! You'll also see that the cursor takes the shape of No Entry road sign.

Why?

 

[theboyhope]

Both Mozilla and IE (not sure about the other browsers) allow you to drag an image onto the toolbar or into the address bar.

You would probably see the exact same behaviour with a link.

 

[theboyhope]

If it were called from within a user-defined function, the scope would be limited to the calling function and would never look outside of itself for the function.

Sorry, tviman. Wrong again, dude. The only restriction would be if the handling function was nested inside another.

-------------------------------------------------------

A small example that might help clarify the difference between brackets/no brackets on the end of a function name:

[navy]
<script type="text/javascript">

function test() {

	return "Some text.";
}

alert( test );
alert( test() );

</script>
[/navy]

 

[tviman]

My apologies to all!!! I stand corrected.

There's always a better way. The fun is trying to find it!

 

[inbaron]

Thanks theboyhope.

Is there a way to cancel this default behavior of images so it will not interefere with the mouseover event?

 

[theboyhope]

Not that I'm aware of, inbaron. Maybe someone else knows a way ...

 

[BillyRayPreachersSon]

try adding this to your image tag:

ondragstart="return(false);"

Hope this helps,
Dan

 

[inbaron]

Funny, adding ondragstart="return(false);" to the image cancels the appearance of the the "No Entry" cursor form but it does not solve the problem. The onmouseover on the other image is still not triggered.

 

[BillyRayPreachersSon]

Hmm.. try adding an event.cancelBubble statement:

<img src="whatever.gif" ondragstart="event.cancelBubble = true; return(false);">

No idea if it will work or not, but worth a try )

Dan

 

[inbaron]

It does the same as just return(false). The cursor "No Entry" form disappears bu the mouseover is not triggered.