mbirth's Wiki snippets:css

Roll-over

Tue, 15 Jul 2008 22:30:27 +0200

Roll-over

Use this CSS:

  /* CSS rollover: http://wellstyled.com/css-nopreload-rollovers.html */
  A#gerol {
    display: block;
    width: 130px;
    height: 320px;
    background: url('img/automat_gerolX.png') top left no-repeat;
  }
 
  A#gerol:hover {
    background-position: -130px 0;
  }
 
  A#gerol IMG {
    display: none;
  }

and add images like this:

<!-- This way, the IMG is visible, when user disables CSS parsing -->
<a href="#" id="gerol" title="GEROLSTEINER K&uuml;hlsystem"><img src="img/automat_gerol2.png" alt="" title="GEROLSTEINER K&uuml;hlsystem" /></a>

CSS

Tue, 15 Jul 2008 22:33:48 +0200

CSS

Roll-over