Current course:

CSS Rollovers

The Code:

<head>
      <style type="text/css">
            #smiley:link, #smiley:visited {
                  display: block;
                  width: 100px;
                  height: 100px;
                  background-image: url('images/smiley.jpg');
                  background-position: top left;
                  }
            #smiley:hover, #smiley:active {
                  background-position: bottom left;
                  }
      </style>
</head>

<a id="smiley" href="#"></a>



The Example:




The Explanation:


The anchor: First we create a link (anchor), and give it an id. The id lets us reference this specific link.

The style part 1: Then, using styles, we give it a width and height of 100 pixels. To do this, we must first define it as a "block" level element by using the "display" definition.
anchor
The image: We then create an image that is twice as high as the link. In the top half of the image is our "normal" state, and in the bottom, the "over" state.
smiley

The style part 2: We set the background image of the link to our newly created image, and set it's position to the top left.
Then, on it's hover and active states, we set it's background position to be BOTTOM left.
smiley normal state     smiley normal state    

This creates a window effect, where you're basically looking through the link, and only seeing one portion of the background image at a time.