Preloading (CSS) rollover images

**Paul O'B** · Oct 7, 2003 07:32

Hi,

BTW the last two images are not in their container in IE6

The last two images in that block are misplaced in IE6 because you haven't defined a class for the middle spacer img to occupy. You have left the class as container5 but nothing is defined. Change it to .spacerimg and add a style similar to this:

Code:

.spacerimg {
OVERFLOW: hidden; 
WIDTH: 100%; 
HEIGHT: 67px
}

That should make it display ok in IE6.

Paul

**mediaman_12** · Oct 7, 2003 07:36

Thanks. I already had a container round the images, so I added the {display:block} to that, I just nead to test on my Mac at home, and it could be sorted. I also added a .navgap class to deal with the gap.

P.S. yeh I noticed about them bursting out of the container at the bottom (If you resized the window it sorted it though?) adding a <br clear="all" /> and a non-breaking space after the nav elements have fixed it though.

**Lewis** · Oct 7, 2003 16:38

Reading over your postings, the following is a must read:

http://www.simplebits.com/archives/2...rollovers.html

He uses a method partly talked about, but explains this process very well and to the point. Hope it helps :-)

**Paul O'B** · Oct 8, 2003 00:45

Hi Lewis,

Thanks for the link

, but if you read the thread thoroughly you will see that this method was discussed above and finally discounted. Although I'm not saying that this method isn't very useful as you can have three images in the background for the normal, hover and active states which would be awkward to achieve otherwise. It's just the flicker that we were trying to avoid.

The problem with moving the background image is that IE displays the hourglass and you get the annoying flicker. This happens not only when the image is loaded but also when it is moved.

Hiding the foreground image and leaving the background image static (as in my original examples) does not suffer from this flicker and does not incur the hourglass flicking on and off.

However it's all a matter of choice and what suits best.

Paul

**mediaman_12** · Oct 8, 2003 01:26

It appears that the 'major flicker' (where the roll over images disapear) is more of a 'developer' issue.
as described on this page.
Web Developers always want to see the most recent version of a page etc. so we have all set the 'check for newer version of the page' to every time, It seams like it's this setting that causes the flicker. Fortunately IE's default setting (and the one which most people keep) is 'Automatically'.

**junjun** · Oct 8, 2003 05:49

Originally Posted by mediaman_12

Fortunately IE's default setting (and the one which most people keep) is 'Automatically'.

mediaman,
Fortunately, we've discovered through this thread, a solution that works also when 'check for newer version of the page' is set to every time. Asking people to change their IE settings hardly is a recommended solution.

**DougBTX** · Oct 8, 2003 09:51

Anyone had a go at getting something working using a span in an <a>, set a bg on it, and then use margins/padding/position to hide the span? (By moving it out the side somewhere perhaps) The Hover state being the BG of the <a> itself.

Douglas

**Paul O'B** · Oct 8, 2003 11:37

Hi Doug,
It seems that anything you do to a bg image on hover in IE produces the hourglass to flick on and off rather annoyingly.

I originally had the hover state of the image in the background of the a tag and then the normal state of the image in the bg of the span. However any movement of the span results in the hourglass appearing and makes it looks like its flickering. (Mozilla looked ok).

I tried making the span invisible, transparent and setting the bg position out of the way and also setting the span to zero height,width & linewidth. All seemed to work in their own way but all produced the hourglass in IE.

As an example I just tried an empty style:
.cssnav a:hover span{}
and this also caused the hourglass to appear.

After that I decided that there was no way to move a bgimage without a flicker of the hourglass in IE although Mozilla seemed ok with it.

Paul

**DougBTX** · Oct 8, 2003 11:44

Hmm, I'm still wondering what the problem is... I've never even seen an hourglass on a mouse over... Oh well, I say live with it. Do you get the hourglass with a JS rollover?

Douglas

**Paul O'B** · Oct 8, 2003 12:18

JS rollovers are fine. The hourglass only appears when the bg image is moved, hidden,loaded etc.

This example works fine with no flicker or hourglass because it's the foreground image that's hidden.

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

I don't think the hourglass is a real problem as sometimes its so quick you might not notice but on larger images its more apparent. (Maybe faster machines than mine don't see it.)

Paul

**alinford** · Mar 15, 2004 11:21

I have read through the entire thread and I can see that this works:
http://www.pmob.co.uk/temp/cssrollover4.htm

I am trying to use a horizontal menu:
http://theconcreteanswer.com/tabbedmenus/

I must be an idiot, because I can't figure out how to apply the solution to my problem

Can somone take a look at my example and help me with getting rid of the flicker in IE6?

**Paul O'B** · Mar 15, 2004 13:49

Hi,

Here's an example using my method above. It does mean you have to have different images to the ones you had.

Anyway you should be able to work it out as I have put it into a list similar to your layout.

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

Hope that helps, but ask if you need any more assistance

Paul

**alinford** · Mar 15, 2004 19:48

Thanks!
1 - Is there any way to put the <img src=.......> tags that are between the Li tags into the style sheet instead? I tried several methods, but could not get it right.
2 - My text for each tab is different. Is there any way to have the graphics autosize to the text?
The tab text is:
http://theconcreteanswer.com/tabbedmenus/index.htm

**Paul O'B** · Mar 16, 2004 04:52

Hi,

Is there any way to put the <img src=.......> tags that are between the Li tags into the style sheet instead? I tried several methods, but could not get it right.

You can put the img src in the background of the list element but this would leave you with exactly the same problem that you had before. i.e. You will get the hourglass and flicker in IE again.

Any manipulation of the background image causes the hourglass to appear (and also a very slight delay). This even happens if you use the one background image which holds all states of your buttons and you swap between then just using the background position.

The only way to avoid flicker is by using the method I have described (and it also seems to be the fastest).

You can put the image in the background of the list and then cover it up with a background image in the anchor. But when you hide the anchor the bg image is hidden and then has to reload causing the hourglass to appear , hence the flicker. Foreground images do not suffer from this and seem to be available quicker from cache than corresponding bg images.

This is only in IE anyway so if you don't want image tags in your html then stick with what you've got as it works quite well (and is the way most people do it).

There really is no other way of avoiding the flicker (or it hasn't been found yet).

Also as you want variable length text in your anchors then you are probably stuck to using background images as foreground images can't be manipulated in the same way.

You may get slighly better speed if you use the background-position method as shown here:

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

Hope that helps.

Paul

**broctser** · Sep 7, 2004 20:47

Does anyone know how to get the "a:active" tag to work for the example given at redmelon ? I have added

Code:

.rollover a:active img { visibility: hidden; }

to my style sheet which works in IE, but it does not work in Netscape. Any ideas on how to get it to work in Netscape?

**Paul O'B** · Sep 8, 2004 02:37

HI,

Try using focus for netscape (it works in firefox).

Code:

.rollover a:active img { visibility: hidden; } 
.rollover a:focus img { visibility: hidden; }

Hope that helps.

Paul

**broctser** · Sep 8, 2004 08:41

Thanks for replying

Code:

.rollover a:focus img { visibility: hidden; }

Didn't work for Netscape....any other ideas?

**Paul O'B** · Sep 8, 2004 14:15

Didn't work for Netscape....any other ideas?

It seems to work in Netscape 7. Are we thinking about different things

Or older browers.

The active state is when the image is clicked and setting the image to hidden enables the rollover image to remain visible for a short while until the page changes. This seems to be happening in N7 ok.

Paul

**Sosbek** · Oct 7, 2004 03:46

Ive tried alot of solutions but nothing worked for my menu

It still dont preloads in IE

Does anyone have any ideas?

link: www.kvn-alania.ru/index.php

**Paul O'B** · Oct 7, 2004 06:29

Hi,

Ive tried alot of solutions but nothing worked for my menu

It still dont preloads in IE

Well you haven't tried the right ones then lol

2 things you can do. The first is not to make repeating images so small. They should be at least 5px when repeating a large area or a large number of items. The redraw time is much slower than the load time when you use 1px on any dimension.

The second thing you can do which will cure the problem (even if you stil use those small pixel gifs) is to change the way you do the rollover. The delay in the rollover comes from loading (and drawing) the image on rollover. So therefore you put the over state of the image into the parent already so that it gets drawn on page load. The parent would be your list item.

Then you put the normal state of the image in the anchor which covers the over state that has already been drawn. You now have 2 images stacked on top of each other and both drawn and pre-loaded.

All you do is make the background of the anchor transparent on hover and the image underneath shows through. No more loading or redrawing is necessary as they are already there.

Heres the code to do that.

Code:

#topnav ul#nav { /* padding-top: 0; */
	font: 13px verdana, arial, sans-serif;
	list-style-type: none;
	padding-left: 0px;
	padding-bottom: 27px;
	margin: 0;
	line-height: 19px;
background: url(http://www.kvn-alania.ru/images/menuover.gif) repeat-x;
/* over state of rollover */
}
#topnav #nav a {
	float: left;
	display: block;
	color: #F4F4F4; /*#5D5D5D;*/
	text-decoration: none;
	padding: 4px 10px;
	background: url(http://www.kvn-alania.ru/images/menu.gif) repeat-x;
/* normal state of rollover */
}
#topnav #nav a:hover {
	/*background: #7FA3EC;*/
	color: #FFFFFF; /*585858;*/
background:transparent;
/* hide top image*/
}

You will need to make the necessary changes to your active state etc but you should get the picture.

Paul