[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

quote

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

quote

Thank you Tim! That did it.

quote