Image Rollover Using CSS Instead of Javascript
by Rich Deem

Introduction

Viewing images on the web usually requires the display of a thumbnail image that links to a larger image or some kind of slideshow program. Ideally, it is easiest way for the visitor to see a larger image is to hover the mouse over a link, with the larger image appearing automatically. This task is usually accomplished through some kind of complicated JavaScript program. However, the entire process can now be accomplished using standard html code along with some simple CSS.

Example image

Below is an example, taken from our online greeting cards page, Out of This World Hubble E-Cards of Nebulae. Hovering the mouse cursor over the link produces an enlarged version of the thumbnail image.

Nebula N90Nebula N90

The technique really amounts to smoke and mirrors, since both images are directly coded on the page. However, the larger image is made invisible through CSS and only becomes visible when the visitor hovers over the link. Clicking the link opens the full-size image in the new page. The image above is coded as:

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div>

Images that are linked within the <div id="links"> division are automatically hidden through CSS:

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
}

Since all images are automatically hidden, it is necessary to display the thumbnail as a background image outside of the actual link. In order for the link to work over the image and display the text below the image (instead of over it), it is necessary to include this code:

#links a {
  display:block;
  padding-top: 110px;
}

The larger image is revealed above the link when the cursor is hovered over it:

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}

The other consideration in making this CSS work is the document type definition (DTD). It turns out that when Internet Explorer goes into "Quirks Mode" (no DTD specified), many bad things happen to your "perfect code." In fact, many random visual errors were occurring on this site before the document declaration was set for each page. In particular, this code requires HTML 4 or XHTML, which must be the first line on your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

This is all there is to making the "rollover". If your enlarged image is different from the example (320 px x 240 px), the top and left positions and height and width will have to adjusted accordingly.

Multiple thumbnails per page

If you look at our Thumbnails pages, you will notice that there is a thumbnail and description text centered under each image. In addition, the thumbnails cover the entire width of the page, no matter what resolution you are using. Traditionally, tables have been used to accomplish this task, but they have the disadvantage of being unable to specify an arbitrary number of columns to fill the page width. The effect on these pages is accomplished through divisions. Here is the style code that formats these <div class="thumbnail"></div> divisions:

.thumbnail {
  float: left;
  width: 139px;
  height: 145px;
  border: 1px solid #000;
  margin: 0 15px 15px 0;
  padding: 5px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

The important part of the code is the float: left style, which causes each division to follow each other across the page.

Advantages and disadvantages

The use of CSS to affect a mouseover image preview looks quite cool and is easily coded. The only disadvantage of the technique is that all images are loaded when the page is first loaded. For a page containing lots of images, a user with a dialup connection is going to have to wait a long time for the page to load. However, as of this writing (August, 2007), about 90% of visitors to this site are using broadband. With the cost of DSL approaching that of dialup (~$15.00/month), it is likely that the few remaining holdouts will switch within the next couple years.

Automatic Code Generation

Wouldn't you like to be able to automatically generate code for new images, using a database/spreadsheet? If you have Microsoft Excel, you can download our handy-dandy worksheet to create your own mouseover image page. Just enter the name of your thumbnail, its description, full-size image, and popup image. The formulas automatically create all the code for your page. Download:

thumbnails_example.xls CSS Image Rollover Generator (18 kb)

Download this file, the simple example html file, image files, and Excel file:

rollover_example.zip (516 kb)

Daily Deals from Buy.com
We are a leading retailer focused on providing a positive shopping experience & competitive prices and free shipping for over 12 million products.

http://www.godandscience.org/general/image_rollover.html
Last Modified August 8, 2007

Apologetics

Search

Info

General

Site Helps

 

Rich's Blog