By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,963 Members | 535 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,963 IT Pros & Developers. It's quick & easy.

Ajax / onMouseOver Problem

P: 4

I have an image reference (IMG) in my page that changes depending on the value of a database field. Clicking the image triggers an Ajax call to change the database field (toggles the field value between 1 and 0). I've made it work so that the image source changes to reflect the new value once the Ajax call is complete. In other words, the image reflects the value of the database field in real-time. Kind of like a real-time checkbox. This part works fine.

The problem is that I have a rollover effect on the IMG which I can't get to work smoothly with the Ajax. Here's the problem:

If you click on the image and keep the mouse cursor over it until the Ajax return, you don't notice any problem. But, if you click the image and then move the mouse cursor off it before the Ajax return, the image changes to the onMouseOut state and then back to the onMouseOver state when Ajax returns, even though the mouse cursor is nowhere near the image. And it stays in the "over" state until you move the mouse cursor over and off the image again.

It's a tough problem to describe so I hope this is clear enough. I was thinking perhaps I could solve this problem by somehow triggering (simulating) an onMouseOut event from javascript when the Ajax returns, but I've been searching and haven't found a way to simulate events. I have a feeling it's not possible since it would be a possible security hole. Another possible solution I thought of is to completely replace the mouse events with my own functions, continually tracking the mouse cursor position and changing the image at the right times, but I'd rather avoid adding that complication.

Please let me know if anyone can think of a better solution. I've posted some code below in case it helps. Many thanks.
Expand|Select|Wrap|Line Numbers
  1. function change(that){
  2. xmlHttp.onreadystatechange=function(){
  3.     if(xmlHttp.readyState==4){
  4.         var response = new Array();
  5.         response = xmlHttp.responseText.split(',');
  6.         if (response[0] == '1'){
  7.             eye.src = "img/checked.gif";
  8.             eye.onmouseover = function(){this.src = 'img/checkedover.gif';}
  9.             eye.onmouseout = function(){this.src = 'img/checked.gif';}
  10.         } else if (response[0] == '0'){
  11.             eye.src = "img/unchecked.gif";
  12.             eye.onmouseover = function(){this.src = 'img/ucheckedover.gif';}
  13.             eye.onmouseout = function(){this.src = 'img/unchecked.gif';}
  14.         }
  15.     }
  16."GET","ajax.php" + '?checked=' + checked + '&obid=' + id, true);
  17. xmlHttp.send(null);
  18. }
Mar 27 '07 #1
Share this Question
Share on Google+
3 Replies

P: 4
Minor correction:

The problem as I described it actually isn't what happens with the code I posted. With the code that's posted, the image doesn't turn to its rollover state when ajax returns, but if the mouse cursor is kept over the image and not moved, the image reverts to its normal state even though the mouse is still over it.

Which problem you see depends on what I set the normal state's source to when ajax returns (eye.src). I can make it so it looks right if the user keeps the mouse over the image, or I can make it look right if the user moves off the image immediately after clicking. But I can't seem to code it so that it looks right either way.
Mar 27 '07 #2

Expert Mod 15k+
P: 16,027
You'd probably have to fix it to get the behaviour you want. The reason is that the onmouseover is triggered when the mouse moves over the image, but since the mouse is already over the image, the event has not been triggered and likewise for the onmouseout.

It seems that the mouse co-ordinates may be the only answer, but someone may know of a better solution.
Mar 28 '07 #3

P: 4
The reason is that the onmouseover is triggered when the mouse moves over the image, but since the mouse is already over the image, the event has not been triggered and likewise for the onmouseout.
Yeah, that was my suspicion. It's so frustrating because it's such a stupid little visual problem, yet it completely messes up the user interface.

I thought of one other thing, maybe you can tell me if it's feasible: I've never done it before but I know it's possible to re-write predefined functions in most programming languages. Would there be a way to rewrite an event? All I need is for onMouseOver to check if the mouse cursor is over the element right away instead of waiting for movement. Is this at all possible? Or if rewriting events isn't possible, does anyone know of a way to produce a similar effect some other way?
Mar 30 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.