SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 96
Thread: Preloading (CSS) rollover images
-
Sep 30, 2003, 04:16 #1
- Join Date
- Mar 2003
- Location
- UK
- Posts
- 245
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Preloading (CSS) rollover images
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?
-
Sep 30, 2003, 04:42 #2
- Join Date
- Dec 2002
- Location
- Switzerland
- Posts
- 735
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 30, 2003, 04:47 #3
- Join Date
- Aug 2003
- Location
- Sydney
- Posts
- 187
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeh ive heard that way works.
No need for JS then.
-
Sep 30, 2003, 05:47 #4
- Join Date
- Mar 2003
- Location
- UK
- Posts
- 245
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 30, 2003, 06:16 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Doug has a good example here:http://www.redmelon.net/tstme/roll/
May be of use to you.
Paul
-
Sep 30, 2003, 07:23 #6
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Internet Explorer will not cache background images
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
I'd love to see this solved, big reps for anyone with a solution
-
Sep 30, 2003, 08:07 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I'd love to see this solved, big reps for anyone with a solution
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>
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>
Paul
-
Sep 30, 2003, 08:24 #8
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
Originally Posted by Paul O'B
-
Sep 30, 2003, 08:27 #9
- Join Date
- Aug 2000
- Location
- Houston, TX, USA
- Posts
- 6,455
- Mentioned
- 11 Post(s)
- Tagged
- 0 Thread(s)
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.ssegraves [at] gmail.com
On Image Use, Abuse, and Where We're Headed
stephan | XMLHttpRequest Basics
flickr | last.fm | Cogentas, LLC
-
Sep 30, 2003, 08:38 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi junjun,
Do you actually have a page with an example of that?
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
-
Sep 30, 2003, 08:50 #11
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 30, 2003, 08:59 #12
- Join Date
- Dec 2002
- Location
- Switzerland
- Posts
- 735
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Quentin
-
Sep 30, 2003, 09:06 #13
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.comWordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 09:12 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 30, 2003, 09:17 #15
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 graphicsWordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 09:25 #16
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!!!WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 09:28 #17
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 30, 2003, 09:30 #18
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by junjun
WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 09:34 #19
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Golgotha
-
Sep 30, 2003, 09:42 #20
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
WordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
-
Sep 30, 2003, 10:18 #21
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 30, 2003, 10:41 #22
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 30, 2003, 14:42 #23
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
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.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)
Last edited by Paul O'B; Sep 30, 2003 at 15:06.
-
Sep 30, 2003, 15:13 #24
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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
-
Sep 30, 2003, 15:23 #25
- Join Date
- Nov 2001
- Location
- Colorado
- Posts
- 2,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 homeWordPress Plugins: Comment Info Tip
My Blogs: What a Savage | Search-This
Tools: Search Engine Decoder | PageRank Decoder
Podcast: Rand Fishkin | SitePoint Founders
Bookmarks