CSS Image Rollovers 2

by Joe Gillespie — Nov 1, 2002

CSS boxes can have background images and foreground images. Naturally, the foreground image obscures the background behind it but we can use this to advantage when combined with the image visibility property. The :hover state simply hides the foreground image leaving the background image visible.

First, we make sure that link images have no border by explicitly stating;

a img
      {
      border:none
      }

There are five buttons on the page but they all work in the same way. For the first , 'home page' button, we set the width, height and background image URL . 'no-repeat' means that we only get one image, although there isn't room for more than that anyway, so it hardly matters.

a.home
      {
      background:url(homeover.gif) no-repeat;
      width:178px;
      height:24px;
      display:block
      }

The :hover state applies only to the link ('a' for anchor) image, not the whole box (class), so we say;

a.home:hover img
      {
      visibility: hidden
      }

Which hides the foreground image when the mouse hovers over the button. Although it requires a little hand-coding, it is actually much simpler than the equivalent JavaScript.

The other trick on this page, is the diagonal ranging of the text. This is something that has been possible in DTP programs for ages using polygonal text boxes or wrap-around text techniques but the Web is still very much a rectangular world and we need to use a little sleight of hand. We can't skew the left edge of the box but what we can do, is put each line in its own box and progressively adjust the left positions within an all-encompassing outer box - #col3. Obviously, you do need to use fixed, pixel text sizes for such lines or things could get seriously out of sync.

To get this CSS image rollover to work in Windows IE too, instead of hiding the foreground image, we swap the background image - like this...

a.home, a.home:visited
      {
      background: url(home.gif) no-repeat;
      margin-bottom:7px;
      width:178px;
      height: 17px;
      display:block
      }

a.home:hover
      {
      background:url(homeover.gif) no-repeat;
      width:178px;
      height:17px
      }

Now, the reason that this technique is not quite as good as the previous one is that the 'over' state images are not loaded with the page, they are only loaded when the mouse passes over the buttons for the first time. This can give a slight delay depending on the GIF size and connection speed. With JavaScript rollovers we would normally use a preloading routine to get the images into the browser cache on page load but I'm trying to avoid JavaScript in these examples so we will use another trick. If we put the 'over' state images on the page but give them a width and height of 1 pixel, they will load, but display as tiny dots. This example has a very clean layout and white background, it is more difficult to hide five pixels than on busier pages. So, I've made five 1 x 1 pixel boxes called 'preload1...5' and put the images I want to preload as the background images for those boxes. A 1 x 1 pixel white GIF in the foreground hides the background images completely. You will find them easily in the source.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float