[Pro] CSS Menu Image Disappears

Hello,
I posted this question a while back, but didn’t have any takers so I thought I would give it another try.
I’m using CSS menus with the main menu as an image. (I also am using an image for the hover state.)
The problem is that on the initial hover the image disappears for a few seconds and then reappears. This only happens the first time a user hovers over a menu.

Here is where the menus can be found, http://frontrangeweb.com/gec2/index.html
I’m referencing the gold, “my” menu buttons across the top of the page just below the banner.

The main menu does not have a background color, the hover state does have a gray background color, I added this color so the disappearance of the “my” button wouldn’t be so obvious.

Does anyone have any ideas?
Thanks,
Rich


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Rich,
The image appears to flicker because it is getting loaded only when
the user rolls over the menu. However small the image it will always
take a split second to load and will almost always flicker like this.
The trick is to preload the image before the user gets to use the
menu. As the image has already been loaded by the page the copy used
in the menu will simply be drawn from the user’s cache rather than
from the server.
There are several ways to preload images like this but the easiest is
going to be simply by adding them to a hidden div as markup.

Add the following code as a markup item (Page/HTML Markup/ before end
Body);

<div style="display:none">
     <img src="wx/Resources/GEC_B_MyCoopB.jpg" width="1" height="1"  
alt="" border="0">
     <img src="wx/Resources/GEC_B_AccountB.jpg" width="1" height="1"  
alt="" border="0">
     <img src="wx/Resources/GEC_B_CommunityB.jpg" width="1" height="1"  
alt="" border="0">
     <img src="wx/Resources/GEC_B_MyHomeB.jpg" width="1" height="1"  
alt="" border="0">
     <img src="wx/Resources/GEC_B_BusinessB.jpg" width="1" height="1"  
alt="" border="0">
</div>

The CSS (display:none) prevents the div’s contents showing up in the
browser and even if you have CSS switched off the images will show up
as four 1x1 pixel dots.
Regards,
Tim.

On 10 Mar 2010, at 20:47, Rich Gannon wrote:

Hello,
I posted this question a while back, but didn’t have any takers so I
thought I would give it another try.
I’m using CSS menus with the main menu as an image. (I also am
using an image for the hover state.)
The problem is that on the initial hover the image disappears for a
few seconds and then reappears. This only happens the first time a
user hovers over a menu.

Here is where the menus can be found, http://frontrangeweb.com/gec2/index.html
I’m referencing the gold, “my” menu buttons across the top of the
page just below the banner.

The main menu does not have a background color, the hover state does
have a gray background color, I added this color so the
disappearance of the “my” button wouldn’t be so obvious.

Does anyone have any ideas?

FreewayActions.com - Freeware and commercial actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Tim!
That did it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options