Preloading (CSS) rollover images

**mediaman_12** · Sep 30, 2003, 04:16

page
I have created the navigation on this page using the modified CSS list method (so the 'buttons' are always proportional, with the title centred above the image). All the rollovers etc work fine, except that now that it's on the webserver instead of the local machine there is a delay (while it load's the image 'hover' states image) the first time you mouse over each item.
Is there anyway I could 'preload' the CSS background images, in the same way you do when you use a regular rollover?

**quenting** · Sep 30, 2003, 04:42

maybe you could put an image pointing to the mouseover jpg/gif and set its display to "none" somewhere on your page.
Haven't tested it so i can't promise it'll work, only intuitively i would say it should work.

<img src="yourhovergif.gif" style="display:none;" alt="" />

Of course it's a hack, don't know if you can do something cleaner

.

Quentin

**ausurt** · Sep 30, 2003, 04:47

Yeh ive heard that way works.

No need for JS then.

**mediaman_12** · Sep 30, 2003, 05:47

If I put the images with the class="hidden" (I created a special class in the CSS file) in the list, it even displays ok with the css switched off.
It's not 'clean' but it works, thanks.

**Paul O'B** · Sep 30, 2003, 06:16

Hi,

Doug has a good example here:http://www.redmelon.net/tstme/roll/

May be of use to you.

Paul

**junjun** · Sep 30, 2003, 07:23

This is an interesting problem. It could possibly save many a website from using javascript rollovers for images.

Several people have tried to change background-image with CSS without getting the 'flicker' that occurs in IE. It seems that IE is not able to cache background images.

There's been a few solutions tried to solve this. One is to move the background-image, so that another part is shown on hover. Another example of the same idea. But, evidentally, IE still needs to load the background image again, even if it's just to move it.

Originally Posted by quenting

maybe you could put an image pointing to the mouseover jpg/gif and set its display to "none" somewhere on your page. Haven't tested it so i can't promise it'll work, only intuitively i would say it should work.

<img src="yourhovergif.gif" style="display:none;" alt="" />

I've tried a similar approach, by having one image on the parent element, and one in the link. Then setting the hover background-image for the link to none, so that the parents element background will show through. But I met the same problem again with Internet Explorer, it will not cache background images ..

I'd love to see this solved, big reps for anyone with a solution

**Paul O'B** · Sep 30, 2003, 08:07

I'd love to see this solved, big reps for anyone with a solution

Hmm doesn't the link in my previous post do that?

I've used techniques similar to doug's which work without flicker in IE6 and Mozilla. You put the image in the background of the div (effectively the rollover state) and then just put an image link in the foreground. On hover set the image to visibility:hidden which shows the underlying image.

Code:

<style type="text/css">
<!--
.outer {
 height: 60px;
 width: 60px;
 background-image:  url(image1.gif); 
}
.outer {display:block; }
.outer img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block}
.outer a:hover{visibility:visible}
.outer a:hover img {visibility:hidden}
-->
</style>

Html

Code:

<div class="outer"><a href="#"><img src="image2.gif"  /></a></div>
<div class="outer"><a href="#"><img src="image3.gif"  /></a></div>
<div class="outer"><a href="#"><img src="image4.gif"  /></a></div>

The images are all the same size of course.
Paul

**junjun** · Sep 30, 2003, 08:24

Originally Posted by Paul O'B

Hmm doesn't the link in my previous post do that?

I see it it heavily on http://www.redmelon.net/tstme/roll/ due to the large images that has to be downloaded every time the mouse leaves and enters.

Originally Posted by Paul O'B

I've used techniques similar to doug's which work without flicker in IE6 and Mozilla. You put the image in the background of the div (effectively the rollover state) and then just put an image link in the foreground. ?

Do you actually have a page with an example of that? I tested your code but could not get it to work, the flicker is still there. I am also trying to find a way in which can use normal html text for the 'button' too, and it seems I can only use background images if I want to achieve this.

**Hartmann** · Sep 30, 2003, 08:27

mediaman_12,

Just so you know, the page you listed does not display in Mozilla Firebird correctly. The top section is skewed and takes up most of the page.

**Paul O'B** · Sep 30, 2003, 08:38

Hi junjun,

Do you actually have a page with an example of that?

Does this work? :

http://www.pmob.co.uk/temp/cssrollover.htm

It seems to work ok in MOzilla and Ie6 (but still flickers a bit in Opera, I'll have to see if there's a fix)

Paul

**junjun** · Sep 30, 2003, 08:50

Paul,
yes that actually works perfect in IE6 and Moz1.5a.

In Opera 7 it gives me a *constant* flicker when the mouse is *moving* on the image

**quenting** · Sep 30, 2003, 08:59

I see it it heavily on http://www.redmelon.net/tstme/roll/ due to the large images that has to be downloaded every time the mouse leaves and enters.

Curious... In my browser, although an old version of ie (5.5, on nt4), the images clearly get cached. I can move very quickly other them without any flickering.

Quentin

**Golgotha** · Sep 30, 2003, 09:06

I would love to see a solution to the flicker problem. Also the solution should have text + a graphic background.

I have played with this for awhile and couldn't find a solution. You can see my attemps here: www.search-this.com

**Paul O'B** · Sep 30, 2003, 09:12

Hi junjun,

Try this for Opera7 as well:
http://www.pmob.co.uk/temp/cssrollover2.htm

Should work in Ie6, mozilla 1.2+ & Opera7 (without flicker) with any luck.

Paul

**Golgotha** · Sep 30, 2003, 09:17

Paul, that's not a big enough sample size to really test it. Mine works too....sometimes...

You need to create a navigation on mulitiple pages and move between the pages to really test it.

+ get some text in there instead of just graphics

**Golgotha** · Sep 30, 2003, 09:25

actually you can see mine get jacked best this way:
open www.search-this.com then open another browser and move the one browser on top of my site and move your mouse back over my links. FLICKER!!!

**junjun** · Sep 30, 2003, 09:28

Paul,
Works *great* in my browser!
This will be really useful for *anyone* using javascript to do mouseover effects on buttons. Great job!

Golgotha,
'sometimes' is not a very valid argument :-) Test Paul code, and I'm sure you'll be happy, your navigation buttons are all images anyway. ot: your search engine decoder is a really helpful tool. Your site is bookmarked.

**Golgotha** · Sep 30, 2003, 09:30

Originally Posted by junjun

I'm sure you'll be happy, your navigation buttons are all images anyway.

nope, that's text. Give the SE some food that way!

**junjun** · Sep 30, 2003, 09:34

Originally Posted by Golgotha

nope, that's text. Give the SE some food that way!

You're right of course, my bad. It that would be optimal fr the search engines, and that was the solution I personally have been trying to solve, wihtout success.

**Golgotha** · Sep 30, 2003, 09:42

Yeah, my solution works good for rollovers that are still SE friendly, but it still has its problems. I will explore Pauls ideas more later when I get home and If I come up with anything I will share.

**Paul O'B** · Sep 30, 2003, 10:18

Hi,

I suppose something like this might work for text link rollovers.

http://www.pmob.co.uk/temp/cssrollover3.htm

The background is just set to transparent on rollover.

As Golgotha said it needs testing on a page with more rollovers. It seems to work ok in IE6, moz1.2+ and Opera7.

Paul

**junjun** · Sep 30, 2003, 10:41

I'm guessing that what Golgatha and I are trying to figure out, is how to get something like this work without flikker:
http://www.domedia.org/oveklykken/cs...over-image.php

**Paul O'B** · Sep 30, 2003, 14:42

Hi,

I'm guessing that what Golgatha and I are trying to figure out, is how to get something like this work without flikker

You mean like this:

http://www.pmob.co.uk/temp/cssrollover4.htm

Paul

Edit:

Here's an updated example of the previous image only rollovers:
http://www.pmob.co.uk/temp/cssrollover5.htm

They seem to work without flicker (only tested in Ie6 , moz1.2+ and Opera7)

**junjun** · Sep 30, 2003, 15:13

Originally Posted by Paul O'B

Hi,
You mean like this:

http://www.pmob.co.uk/temp/cssrollover4.htm

Yes

I spent numerous hours surfing last week, from blog to blog, from one CSS guru to the other, and noone was able to do this. They all had solutions that more or less flickered. You should put some comments on that page and let the world know asap

**Golgotha** · Sep 30, 2003, 15:23

ok, now if you can move that text over about 30pixels to the right, using padding or margin and have it also cross browser friendly I will kiss you.

really no flicker!!! cant wait to get home

The SitePoint Forums have moved.

User Tag List

Thread: Preloading (CSS) rollover images

Thread Tools

Display

Preloading (CSS) rollover images

Internet Explorer will not cache background images

Bookmarks

Bookmarks

Posting Permissions