Rollovers

Image rollovers are simple/primitive animation wherein one image is replaced by another when a certain event happens. Here we'll study image rollovers that occur when you point at it with your mouse. What we want is for the image to change to another image when you mouse over the image area, and for the original image to return once you move your mouse off the image area.

Links and Pseudo Links

The basic and for now the only way to achieve rollover effects we described above that work in most current browsers is by using the x/html element a as the container for the images.

In this technique we've used a dummy hyperlink to present the images. Providing a bogus target in the href attribute assures us that when the user clicks on the image nothing happens. Of course if the image is to serve as a hyperlink then the target destination would be declared accordingly.

Note that images are background images accessed through the style sheet. There are no images in the mark up itself. If the images are not important to the content of the document then this technique is permissible; if they are crucial to understanding the document (a technical paper for instance employing diagrams) then this technique should be avoided.

Here is the markup and css:

<a id="pseudolink" href="#x"></a>


a#pseudolink
{
   display: block;
   width: 72px;
   height: 72px;
   float: left;
   margin: 0 1% 0 0;
   border: none;
   background: url("img72px_A.jpg") no-repeat;
}

a#pseudolink:hover
{
   background: url("img72px_B.jpg") no-repeat;
}

Pseudo Images

Image 1

The "image" on the left is not an image file at all. It's simply text glamorized using CSS. When you mouse over it the background color is changed and the text has a make over to change it's color various font properties.

The problem with this technique is that you cannot alter the text. So this method is limited to those instances when you have a text only image, with the text itself being static/unchanging.

Here's the markup and css:

<a id="pseudoimage" href="#x">
   <span id="image1">
      Image 1
   </span>
</a>

a#pseudoimage
{
   display: block;
   width: 72px;
   height: 72px;
   float: left;
   margin: 0 1% 0 0;
   border: none;
   background: red;
   text-align: center;
}

a#pseudoimage:hover
{
   background: navy;
}

span#image1
{
   font: italic bold 1.4em serif;
   color: black;
   position: relative;
   top: 25px;
}

a#pseudoimage:hover span#image1
{
   font: bold 1.4em sans-serif;
   color: yellow;
   bottom: 0;
   right: 0;
}

Actually, when I said above that the text is hopelessly etched in stone I lied. With the css property content it is possible to alter the text that is displayed.

Hover on Any Element

Mozilla 0.9.x, Netscape 6.1, IE5.5, IE6 and Opera 6 (and that covers just about all major browsers to date) do not yet understand hover on elements other than a. These browsers present the first image but nothing happens when the mouse is hovered over the first image. Thus far, then, this technique is possible only with Mozilla 1.0 and later builds.

Be careful not to put any padding for the div element or the second image will appear offset and will not completely overlap the background image.

I've floated the container to the right and set its width and height equal to the images' dimensions.

div#tech1
{
   background: url("img72px_A.jpg") no-repeat;
   width: 72px;
   height: 72px;
   float: right;
   margin: 0.5% 0 0.5% 1%;
}

img#rollover1
{
   width: 0;
   height: 0;
}

div#tech1:hover img#rollover1
{
   width: auto;
   height: auto;
}

Images in Markup, Positioning Via CSS

This technique is better in that the images are both marked up so that if no style sheet is applied both images will appear side by side. In Technique 1 examining the mark up will reveal only one image, the other being in the style sheet. This is a bad way of marking up documents. Separation of presentation and content means that content should

Slide Projector

See a demonstration of what I call a slide projector. For some reason the example doesn't work in Mozilla 1.0 when placed here at this section of this document, although it does work properly when placed above any of the preceding rollover examples.

Afterword

Rather than present more examples I'd just like to say that you can combine the above techniques (and other methods not discussed here as well) to create even more complex ways of presenting and replacing images. For instance you can have text superimposed on the background images and change the font properties of that text when the image rolls over.

CSS is extremely powerful and with some imagination and lots of experimentation you're bound to come up with creative web pages.