| User | Post |
|---|
12:41 pm
November 21, 2009 |
Chris Ullyott
| | Fullerton, CA | | | Member | posts 66 |
| | Hey yall, What's your take on the current practices to do image rollovers? We were doing it in HTML with a <body onLoad> preload. But now one of our developers is telling us that this tag is confusing their system with the original <body> tags, and he'd like us to remove the preloading. Is preloading rollovers necessary, or is there a totally different way to do rollovers you would recommend? | |
|
9:54 pm
November 22, 2009 |
Daniel Bachhuber
| | | | | Admin | posts 102 |
| | Excellent question, Chris. If you're using images for buttons, with rollovers, etc., I think it's pretty important to preload them to maximize the user experience. There are two methods of doing rollovers that I know of. The first is to preload the images with Javascript. The second, and probably recommended method, is to preload images with CSS. Basically, what you'll do is create empty elements on the page with 0 height and 0 width, and then load the images you need as background images for that div that are hidden outside the element. | |
|
1:26 am
November 23, 2009 |
Chris Ullyott
| | Fullerton, CA | | | Member | posts 66 |
| |
11:16 am
November 23, 2009 |
MaxCutler
| | | | | Member | posts 10 |
| | Actually, the "correct" way would be to use CSS sprites. There are plenty of tutorials out on the web, a decent one from a cursory search is here. To summarize, a CSS sprite is a number of images combined into a single file, and then you use the CSS height, width, background-position, and background-repeat to control which part of the image is used as the background for an element. On the :hover CSS, you simply adjust the background-position to show a different portion of the sprite. Because all the states are in a single file, they will all get downloaded together. |
|
6:14 pm
December 3, 2009 |
Chris Ullyott
| | Fullerton, CA | | | Member | posts 66 |
| |
Login 
Forum
Print this Post 
Topic RSS 
