Preloading (CSS) rollover images

[Paul O'B]

Hi,

Most of the answer was in my first post from Doug's site http://www.redmelon.net/tstme/roll/ (his codes a lot neater than mine).

I have used similar techniques myself before for creating pop up boxes etc and disjointed rollovers and its just a matter of finding out what works and what doesn't. Loading an image in the background and then one in the foreground seems to work quite well, but loading 2 background images in the same place doesn't seem to produce the desired effect.

Anyway hope its of some use.

Paul

[junjun]

Anyway hope its of some use.
Paul

Definately, I think this is awesome!

[Golgotha]

ok, here's what I been playing with http://www.search-this.com/indexcss.asp

seems pretty good, but a few minor issues


1.) Notice in IE you get the text selector cursor instead of the finger pointer. Very annoying usability wise.

2.) Couldn’t we get the <img src> in a span itself and that way if you want to change the background image later you only have to make the change in the css.

3.) I’m wondering what the search engines will think? The anchor link is an img and text. Would be better to just be text – no image.

[junjun]

1.) Notice in IE you get the text selector cursor instead of the finger pointer. Very annoying usability wise.

Add

 cursor: hand;

to the CSS rule for the span.

[mediaman_12]

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.

Hummm? I use Firebird mainly (Using IE only to test pages) and it's rendering fine on mine (after a few tweeks this morning it also should be OK in Safari. I swaped the id's for classes) .
What version of Firebird are you using (mine is 0.6.1)? could you mail me a screeny to mediaman_12@hotmail.com thanks.

There are some really interesting soultions on this page, but non of them can work on mine .
The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window, Instead of making rolover's that are optimised for the smaller window, and in the bigger one just having loads of space.
The only image that is displayed from the list is the titles.

Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.

[Golgotha]

Add

 cursor: hand;

to the CSS rule for the span.

learned something new! Good one!

still think we need to get rid of the img src in the anchor tag - The search engines should be happier that way. Any Ideas?

PS. I'm really impressed with what we have so far, a lot better than the 100's of other techniques offered out there!

just need to hide that im src tag!!!

[Paul O'B]

Hi,

just need to hide that im src tag

It seems that only the foreground image will cache and so if you put the second image into the background as well it will have to reload when you switch it on and off.

I did do a version with two anchors in the same place. One for the image and one for the text only ( I thought that it might be better for SE etc). I thought it was working but when you hovered over the text the image swapped back again. It was fine when you hovered over the image alone. Just couldn't get it to work that way.

There probably is a solution in there somewhere.

Paul

[Golgotha]

Paul what if we just took the foreground image and stuck it in a hidden div someplace else? would that be enough to cache it?

[vgarcia]

Add

 cursor: hand;

to the CSS rule for the span.

Actually, it should be "cursor: pointer;". "cursor: hand;" only works in IE/Windows.

[Paul O'B]

Hi,

Paul what if we just took the foreground image and stuck it in a hidden div someplace else? would that be enough to cache it?

Here's 2 examples with and without an image preloaded. I'm not sure it makes any difference. I think the background image still appears to be loading because the hourglass appears.

Have a look and see what you think. The background image is hidden by setting the background to transparent and letting the other image show through.


Without image in foreground
http://www.pmob.co.uk/temp/cssrollover6.htm

With image in foreground
http://www.pmob.co.uk/temp/cssrollover8.htm

Original version (to compare with) hiding the foreground image on hover. foreground image

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


Paul

[Golgotha]

<throws hands up /> stink

[Paul O'B]

Hi Mediaman 12,

There are some really interesting soultions on this page, but non of them can work on mine .
The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window

Would something like this work. It seems to rollover a lot lot quicker than your page (and its fluid).

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

(only tested in IE6, Opera 7 & Moz 1.2)

Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.

Try something like this:

hr.newrule {
 color: #FFFccc;
 text-align: center;
 height: 10px;
 width: 30%;
 border: 1px solid #FFFFFF;
 background-color: #FFFCCC;
}

<hr class="newrule" />

I think mozilla uses background colour and IE uses foreground colour for the display so you have to set both.

Hope this helps.

Paul

[hurricane.uk]

Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.

As Paul says, IE uses color whilst Mozilla (and Opera) uses background-color, there's also a couple of other browser issues to consider - more here.

[mediaman_12]

Hi Mediaman 12,


Would something like this work. It seems to rollover a lot lot quicker than your page (and its fluid).

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

(only tested in IE6, Opera 7 & Moz 1.2)

Hope this helps.

Paul

Thaks for the HR, Works in both IE and Firebird, I will test it in Safari When I get home.

test example
The rollovers are almost sorted (I even like the way they load in doing it this way), I can't get it to position the image in the centere and hide a bit at each side (instead of just hiding the right hand edge) though, Is this possible? If it isn't I will just re do the images with the 'important' bit at the left hand end.

[Paul O'B]

Hi,

I can't get it to position the image in the centere

Yes I had problems with that as well. As far as I can see it seems that you can only get that effect with background images. (You could scale the whole image up and down with the div but then the image gets distorted slightly, so its not really a viable alternative.)

Paul

[platinum]

I can't remember where I picked up the tip, but the best method i've found is to use background-position, no flicker and no need to worry about preloading.

example

[Paul O'B]

Hi Platinum,

There was a link to this example earlier in the thread from junjun.

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.

I assumed it had been discounted but I have seen it used to good effect before. A quick test on Mediaman's image seems to indicate that it works ok but you do get the annoying hourglass showing. I've only tried it with the same image but it would be worth trying with multiple images.

Here's a test :

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

The good point is that allows the fluid centring effect that mediaman wanted.

Paul

[Golgotha]

hey Plat~
I looked at your CSS and cant even see how/where you have the hover image - strange. Also, yours does have the flicker, sorry

[platinum]

Ah okay, knew it had to have been mentioend however I don't seem to get the "hourglass" effect in IE6 it works like an ordinary rollover for me.

[platinum]

hey Plat~
I looked at your CSS and cant even see how/where you have the hover image - strange. Also, yours does have the flicker, sorry

Odd, I honestly don't see any flicker/hourglass whatsoever in IE6 on windows XP, works exactly the same way it does in firebird.

BTW, the image I used is this:



The css just moves it up and down according to the state.

[Paul O'B]

Hi Platinum,

any flicker/hourglass whatsoever in IE6 on windows XP

I use IE6 xp and the hourglass just flicks on and off very quickly. I don't really get any flicker just the hourglass.

I think its an excellent technique and if we could just kill the hourglass it would be even better. (My original examples don't have flicker/hourglass because its the foreground image that gets hidden and foreground images get cached whereas bg images don't seem to.)

Anyway I think theres enough different methods here to keep everyone happy [img]images/smilies/smile.gif[/img]

I looked at your CSS and cant even see how/where you have the hover image - strange.

There is only one image. You have the top part of the image showing and the hover state is the bottom part of the image which isn't showing. You just then flip the background position to show each part of the image as required. It should happen very quickly.


Paul

[Golgotha]

hey Plat~ how can both images be called roll? and it knows which one to use? What am I missing here ?

[Golgotha]

boy maybe my coffee isn't kicking in yet, but I dont get http://www.pmob.co.uk/temp/cssrolloverpercent4.htm

there's only 1 image?

is the flicker/hourglass/non-cache happening here? I can't tell on my T1, but I suspect it is?

[platinum]

Ah - that image above is just one single image, with both rollover images in it. And there is a "window" of maybe a mask would more accuratly describe it which you can see a 200x22 pixel gap. Basically the CSS shifts the background image up and down (and you can only see whats within that "window").

[Golgotha]

ah, I get it, took me awhile to see the man behind the curtain, never seen it done this way, kinda cool, but still no cache!

I want the best of both worlds, Im still not satisfied!!