|
| |
|
|
BobbyDouglas
Posts: 5470
Joined: 5/15/2003
From: Arizona
Status: offline
 |
Pre-load images using CSS (such as hover images) - 3/5/2006 2:36:38
It's been rather annoying when I would rollover a menu image (in a list), and watch it disappear and then reappear with the new rollover image.
I searched for awhile for a javascript solution to this, but didn't find anything that was simple to do.
After thinking for awhile I figured I could just create a div and have it load the image, and display nothing.
I've only tested it locally, so I am not sure if it works with all browsers, but there shouldn't be a reason it wouldn't.
First, create a div id in your CSS file that uses the background attribute to display the image, then set the div to not display anything.
div#preload1 {background: url(images/menu2.gif);display:none;}
div#preload2 {background: url(images/subnav2.gif);display:none;}
Then go to your HTML page where the image is going to display, and insert the div with the id specified above somewhere in the HTML (placement doesn't really matter).
<div id="preload1"></div><div id="preload2"></div>
If anyone knows of a valid way to condense it into one line, speak up.
[edit]It looks like this would be a better way of doing what I want: Sliding Doors of CSS, Part II[/edit]
< Message edited by BobbyDouglas -- 3/5/2006 5:48:07 >
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
|
|
|
|
d a v e
Posts: 4170
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 2:42:53
a quick google for css preload found a few things that might be more condensed
in particular one on zeldman
http://www.zeldman.com/daily/0203c.shtml (scroll down or search in your browser for "preload")
:)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5470
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 3:47:37
Google's results were pretty horrible, at least the 1st page ones- I didn't bother checking the other pages.
Looking at that code, you still need to include the div in the page for the browser to reference the image, right?
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
d a v e
Posts: 4170
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 4:02:48
think so...
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5470
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 4:12:21
Basically what I meant was that you will end up with the same code as what I have.
Although I did learn how to block people from viewing your CSS file!
Try finding the CSS file for http://www.maratz.com if you don't manually change the referrer, you won't be able to get it!!!!!
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
d a v e
Posts: 4170
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 4:15:34
yep.
not sure how to manually change the referrer but do you mean this stylesheet?
http://members.tiscali.fi/dave_pirjo/test-area/maratz.css
_____________________________
David Prescott
Gekko web design
| |
|
|
|
BobbyDouglas
Posts: 5470
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 3/5/2006 5:52:21
That's might be the code in the CSS file that is used, but that is most likely not the exact same file that is being called!
Cheater!
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
johnwboyd
Posts: 1
Joined: 7/5/2008
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 7/5/2008 11:16:03
Another option I just did that worked like a charm is to to simply code the image(s) and set their height and width to 0. : ) So the browser loads the hover with the page load without any complicated scripts or even div's needed. And a very small bg image is NOT going to slow page load down. : )
| |
|
|
|
d a v e
Posts: 4170
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Pre-load images using CSS (such as hover images) - 7/5/2008 13:44:01
or you can position it (the swap image hover state) off the page with negative margins or such at its normal dimensions
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
