View Full Version : "Blinking" buttons

07-21-2008, 05:24 PM
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>

Sample of one of the links code in the CSS:

#about {
left: 0px;
width: 125px;
height: 325px;
position: absolute;

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


Thanks for the help.

07-21-2008, 05:29 PM
<script language="JavaScript">
if (document.images)
pic1= new Image();

pic2= new Image();


07-21-2008, 06:00 PM
You guys are fast and awesome. :-) Thanks for the help.

07-21-2008, 08:29 PM
I’d rather suggest a CSS solution as JavaScript just adds more code and isn’t 100&#37; 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.