BHS DESIGN - CSS Rollover Link Images

Page Info

Page Title: CSS Rollover Link Images
Description: Rollover Link Images without using JavaScript but CSS only
Author: Dumb Genius
Submission Date: 18-03-2006 04:19

Rating & Comments

View or add comments:

(0)
Average members rating:

7.00

This tutorial will teach you how to use rollover images without Javascript.

Ths first method for CSS Rollover Link Images is to use the following code:

Code :
// hide source code
// hide line numbers



 1  
 2  a.image { /* definition of the "image" class for <a> */
 3       display: block; /* tag must be a block */
 4       width: 100px; /* width of the image */
 5       height: 100px; /* height of the image */
 6       background-image: url(image1.gif); /* image source */
 7       background-repeat: no-repeat; /* image not repeat along x or y */
 8       }
 9  
10  a.image:hover { /* definition of the "image" class for <a> when pointing on the image */
11       background-image: url(image2.gif); /* 2nd image source appearing when pointing on the 1st one */
12

Some comments are provided so that you understand what's going on. Now that you may be able to figure it out. Add a link tag in your HTML file where yo want to place your rollover image.

Code :
// hide source code
// hide line numbers



1  <a class="image" title="image title" href="link.htm"></a>

The inconvinient of this code is that the second image is not preloaded and the rollover effect is not smooth. To overcome this, you can use the second given code that is actually superposing 2 images and hidding the first one when you're pointing your mouse over it. This makes appear the second one as wanted since it was previously positionned in the background.

Code :
// hide source code
// hide line numbers



 1  
 2  #link { /* "link" will be the container, here div */
 3  position:absolute; /* position of the img link */
 4  left: 200px; /* dimensions, choose smthing to fit your layout */
 5  top: 50px;
 6  width: 100px;
 7  height: 100px;
 8  background: url(image2.gif) top left no-repeat; /* position of the 2nd image in the background  */
 9  }
10  
11  #link a { /* definition of the link in the container */
12  display: block;
13  width: 100%;
14  height: 100%;
15  background: white url(image1.gif) top left no-repeat; /* position of the 1st image in the foreground */
16  color: #000;
17  
18  }
19  
20  #link a:hover { /* hide image1 when pointing on it, make appear the 2nd one that was in the background */
21  background: transparent none;
22

Donation:

If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months.