PDA

View Full Version : CSS Navbar rollover image problem


texas
11 Jun 2011, 05:07 AM
Please can someone help me, I have created a navbar using CSS roll over images, but when you first open the browser and hover over the nav menu the images will go blank for a second before being replaced by the image roll over.

I have used the body onload function but it doesn't seem to work, please does anyone have any ideas?

CSS

#btn-home {
background-image:url(http://www.terrypowell.co.uk/images/btn-home-normal.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:390px;
position:absolute;
top:80px;
width:77px;
}
#btn-home:hover {
background-image:url(http://www.terrypowell.co.uk/images/btn-home-over.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:390px;
position:absolute;
top:80px;
width:77px;
}
#btn-about {
background-image:url(http://www.terrypowell.co.uk/images/btn-about-normal.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:467px;
position:absolute;
top:80px;
width:114px;
}
#btn-about:hover {
background-image:url(http://www.terrypowell.co.uk/images/btn-about-over.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:467px;
position:absolute;
top:80px;
width:114px;
}
#btn-portfolio {
background-image:url(http://www.terrypowell.co.uk/images/btn-portfolio.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:581px;
position:absolute;
top:80px;
width:92px;
}
#btn-portfolio:hover {
background-image:url(http://www.terrypowell.co.uk/images/btn-portfolio-over.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:581px;
position:absolute;
top:80px;
width:92px;
}
#btn-contact {
background-image:url(http://www.terrypowell.co.uk/images/btn-contact-normal.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:673px;
position:absolute;
top:80px;
width:97px;
}
#btn-contact:hover {
background-image:url(http://www.terrypowell.co.uk/images/btn-contact-over.gif);
background-repeat:no-repeat no-repeat;
display:block;
height:50px;
left:673px;
position:absolute;
top:80px;
width:97px;
}


HTML

<body onload="MM_preloadImages('images/btn-home-over.gif','images/btn-about-over.gif','images/btn-portfolio-over.gif','images/btn-contact-over.gif')">


<div id="mainContainer"> <!-- start main container -->

<div id="header"> <!-- start header-->

<div id="header-top"></div>
<a id="btn-terry" href="index.html" title="Click here to return to the homepage"></a>
<div id="slogan"> </div>
<a id ="btn-home" href="index.html" title="Home"></a>
<a id ="btn-about" href="about-terry-powell.html" title="About Terry"></a>
<a id ="btn-portfolio" href="terry-powell-portfolio.html" title="Portfolio"></a>
<a id ="btn-contact" href="contact-terry-powell.html" title="Contact"></a>

</div> <!-- end header -->
resdog
13 Jun 2011, 09:23 AM
One thing that might help is to use a sprite. It's where you combine your regular and "hover" image into one image (usually stacked on top of each other. Then, in the css, you use "background-position" to move the background image on a hover. This way there will not be the flicker.

As for your question as hand, do you have the function MM_preloadImages() defined in your webpage? I know it's a dreamweaver function, but sometimes dreamweaver forgets to add it (if you undo or something like that).