mouseOver and mouseOut weirdness

[XgrinderX]

Hello!

I have an odd situation that doesn't make any sense to me and I am hoping someone can shed some light on it for me.

I have several rollover images on one of my web pages. Some of them I am changing the src within the onMouseOver/Out event in the tag itself. Others I am changing via a JavaScript function. However I am noticing that all of them have the tendency to either "stick" on the mouseover image OR they will show the red X empty image if you move your mouse all the way across the button very very quickly.

It's almost like the mouseout event tries to trigger but the mouseover has not finished yet and it screws it up. I have even tried puttin an alert inside my mouseout function and the alert never pops up, so for some reason the mouseout event is not being called.

Any ideas why this may be happening? Is there a race condition there that I am not taking into consideration?

-Greg

 

[BillyRayPreachersSon]

Can you post a URL to the page in question?

I'm wondering if there are any other factors at play here, such as overlapping elements, etc.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[XgrinderX]

Ok I have made this observation, the red X images only seems to happen when I am viewing the page over my work VPN. When viewed off the VPN I cannot duplicate this issue.

The "stuck" on mouseout image still occurs though. I copied the code into it's own test page, it can be found here:

http://www.moyl.com/dev/test.asp

You'll notice that my method for doing the rollover is a little odd, I am loading all the images and then using a Show and Hide class to make the rollover work. Each button has 4 images - 2 for when it is clicked and 2 for when it is not clicked.

Basically if you move your mouse as fast as you can over the buttons, the arrow will continue pulsating. It will be "stuck" on the mouseover image until you move the mouse over it again and then back off. It will then correct itself.

If you do everything at a regular pace it all works fine. I am kinda new to working with divs and CSS so any help is greatly appreciated.

-Greg

 

[XgrinderX]

This is driving me nuts. I even tried using a more "conventional" approach by swapping the src values using JavaScript but I still get the same issue.

Anyone have any clues?

 

[BillyRayPreachersSon]

Did you ever fix this in the end?

That aside, you should not be using "cursor: hand" as a style, as it is IE-only. You should use the correct "cursor: pointer;".

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[XgrinderX]

I did finally get it to work! I can't remember what I did though. I will look at the code Monday morning and reply again with what I did for a solution.

Also - thanks for the tip on cursor:hand. I actually discovered cursorointer during development of that same site and went through and changed all of them on every site I work on.