IAmBill Posted September 24, 2009 Share Posted September 24, 2009 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 comment Share on other sites More sharing options...
jesh Posted September 24, 2009 Share Posted September 24, 2009 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 comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.