Preload Multiple Images using CSS for Smooth & Instant Rollover Effect

Posted in Design Tips on 30 June 2009 4 comments

To improve your website’s design or user experience, you might need to preload some images for smooth hover or rollover. Instead of using javascript to preload the images, we can do that using CSS.

1. A container that hold the images to be preloaded

The HTML :

?View Code HTML
....
<body>
<div class="preload">
<img src="IMAGE_TO_PRELOAD_1" />
<img src="IMAGE_TO_PRELOAD_2" />
<img src="IMAGE_TO_PRELOAD_3" />
</div>
...
...

The CSS:

?View Code CSS
.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}

EXPLAINATION

  • We place the container after <body> and assign an absolute position to it because usually there will not be anything at that position.
  • We make the container 1 pixel width and height so that visitors cannot see it.
  • Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
  • Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)

 

2. Demo & Rollover Code

Demo:

The Code:

?View Code HTML
<div style="position:absolute;top:0px;left:0px;width:1px;height:1px;visibility:hidden;overflow:hidden;">
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg" /></div>
 
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg" onmouseout="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg'" onmouseover="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg'" />
Posted by zen   @   30 June 2009 4 comments
Tags : , , ,



Post thumbnail of Create a Fancy Search Box using CSS
Create a Fancy Search Box using CSS

  - 4 Comments

Add Comment

Kish says:
September 24, 2009 at 10:33 am

Hi,

Once again thanks for the tutorial
.-= Kish´s last blog ..Save $50 when you spend $250 or more =-.

[ Reply ]
Yuko says:
October 16, 2009 at 9:19 am

The best solution I have found, congratulations, it’s clear, easy, and it dont pretend to be an extrange and bizarre trick.

[ Reply ]
nate smith says:
November 6, 2009 at 4:24 am

how can i get it so that the images are right next to each other so i can use it as a menu.

[ Reply ]
zen says:
November 9, 2009 at 6:31 pm

@nate smith, hi, more explaination? =]

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Please wrap all source codes with [code][/code] tags. Powered by Source Codes in Comments
Previous Post
« Social Bookmark Logo Brushes – Free Photoshop Brush Set Next Post
Light Mini Icons & Bullets for Various Uses (Include PSD and PNG) »
Powered by Wordpress Subscribe : Blog Feed • Comments Feed