Jump to content

Triggering Document.onmousemove And Object.onmouseover At The Same Time.

Recommended Posts

Hi, I have a bit of a situation which I'm too tired to wrap my brain around... normally I would just go to sleep and think of it in the morning, but it's eating me up and I can't sleep until I get the answer.So anyway, I have reassigned document.onmousemove to a specific function. Let's say for debug purposes that this function simply updates a <span> with the coordinates of the mouse. Now, as I move the mouse around, I can see the coordinates changing in the span.The next step was to have an onmouseover event on a specific image object. The goal was to have the image's opacity come in when I hover over the object. The problem is, when I set the event property, while it's triggering (when I'm moving the mouse over the image) document.onmousemove does not trigger. This is a problem for my functionality.Now, I can think of one fairly hackish solution to this... but I'd rather avoid it and I'm hoping that there is a way to get the browser to listen for both events simultaneously. Alternatively, the hacking solution would be to calculate the global mouse coordinates inside of the object.onmouseover function by setting it to the objects top and left positions plus it's relative position inside of the image. ... again, if possible though, I'd like it to try and listen for both events, instead.Thanks.

Link to post
Share on other sites

Both events are firing, it's just that the mouseover handler is only set up to deal with the mouseover event. The mousemove event isn't going to be doing anything while the mouseover event is being handled because the mouseover event is a snapshot in time. The mousemove event is happening, the mouse goes over the image element, and the mousemove event continues to fire.Here's a brief example (tested only in Firefox):

<html><head><script type="text/javascript">window.onload = function(){	document.getElementById("image").onmouseover = imgover;	document.onmousemove = mover;}function mover(e){	e = e || window.event;	document.getElementById("output").innerHTML = "(" + e.clientX + " , " + e.clientY + ")";}function imgover(e){	e = e || window.event;	var colors = ["#F00","#0F0","#00F","#FF0","#F0F","#0FF" ];	document.getElementById("image").style.borderColor = colors[Math.floor(Math.random()*colors.length)];}</script></head><body><img id="image" src="http://w3schools.invisionzone.com/style_images/6_logo.png" style="border:8px solid #000;" /><div id="output"></div></body></html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...