"Blinking" buttons

Hi all -

I posted for help last week on a site I'm developing for a friend about my roll overs. I wanted to put the roll overs in a style sheet so IE users wouldn't get that annoying ActiveX message.

When you load the page and go to roll over the buttons, they blink/flicker, like they didn't load the image up front. Is there something I can place in the head that loads the images so this doesn't happen (or some other alternative)?

Here's the beta site: http://members.cox.net/juliegleaton/jamie/index.html

My code in HTML:

<div id="container">
<div id="links">
<a id="about" href="about.htm"></a>
<a id="portfolio" href="portfolio.htm"></a>
<a id="weddings" href="weddings.htm"></a>
<a id="contact" href="contact.htm"></a>
</div>
</div>


Sample of one of the links code in the CSS:


#about {
left: 0px;
width: 125px;
height: 325px;
background:url(../graphics/about.jpg);
cursor:pointer;
position: absolute;
}

a#about:hover {
background: url(../graphics/about_ro.jpg);

}



Thanks for the help.

<script language="JavaScript">
<!--
if (document.images)
{
pic1= new Image();
pic1.src="../graphics/about_ro.jpg";

pic2= new Image();
pic2.src="../graphics/about_ro.jpg";

}
//-->
</script>

You guys are fast and awesome. :-) Thanks for the help.

I’d rather suggest a CSS solution as JavaScript just adds more code and isn’t 100% reliable. A good tutorial is on http://wellstyled.com/css-nopreload-rollovers.html, although I’m usually putting the image states vertically instead of horizontally.