Mouseover Flicker --- make it go away!
Hi I'm trying to implement a mouseover navigation trick on a webpage.
Please go here to see my problem
I'm using the Javascript mouseover and mouseout events to hide the image so that the underlying table of links will display but it flickers like crazy.
I tried to implement a css based solution that I saw on google to no avail. the css solution appears to work with just images ... not an image and a table.
Any ideas? Your help would be greatly appreciated.
Many Thanks,
sybru
Greg K posted this at 14:55 — 12th October 2004.
He has: 2,145 posts
Joined: Nov 2003
I don't know for sure, but my first guess would be the fact that when you hide the image (or put the table on top of it), the image is no longer there to activate the "onmouseover", so then it will execute the "onmouseout" as soon as the image is gone, hense the "flicker", becasue thent he image comes back which again causes the swap again to get rid of the image. (It appears if you hold your mouse still, the "onmouseout" won't trigger if you are on same exact location when "onmouseover" triggers).
Suggestion: put the "onmouseout" on the table content (if pssoible), as it would only need to trigger if the table is already showing.
-Greg
sybru posted this at 00:10 — 13th October 2004.
They have: 17 posts
Joined: Aug 2004
Many Thanks Greg,
I think that the issue has been resolved. Take a look now ... there should be no flicker. I had to use an entirely different approach. I scrapped the CSS route as that just wasn't panning out. The mouseover mouseout on the div tags was turning into a headache as well.
What I ended up doing was creating a table and put the initial image as the background of the table. Then I placed the table of links inside the first table with its visibility initially set to off (or display:none). On a mouseover of the first table I change the background image to nothing and turn the visibility of the link table on.
It works beautifully. I'll leave this test site up for a bit incase anyone else is having this problem. Just do a view source and grab what you need.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.