css image mouseover

<html>
<head>
<!-- this is embeddeding my cascading style sheet commands directly into the HTML -->
<style type="text/css">

/* a block displays down, inline would display it to the right
The width and the height of the image are important (otherwise it won't all show)
We remove "text decoration" to prevent any funny "anchor link" borders
 */

#rollover {
    display: block;
    width: 190px;
    height: 80px;
    text-decoration: none;
    background: url("http://kittyandbear.net/images/blog/usa-image.png") no-repeat 0 0;
    }

 #rollover:hover
  {
    width: 190px;
    height: 80px;
    text-decoration: none;
    background: url("http://kittyandbear.net/images/blog/usa-image-hover.png") no-repeat 0 0;
  }

</style>
</head>

<body>
I require 2 images, the original and a "hovered over" image:
<br />

<a id="rollover" href="#"><span></span></a>

<br />
Notice there was a delay sometimes, a recommended solution would be to use a single image and a tricky "only show the half that you want to see", e.g. normal top half, "hover" = lower half.

</body>
</html>

Published

Category

~139 words

Tags