Im trying to code a CSS roll over but its not working whats wrong?

Question

Here's the code:

a.image {

display: block;

background-image: url(home.gif);

background-repeat: no-repeat;

}

a.image:hover

{ background-image: url(home_rollover.gif);

}

HTML page:

<a class="image" href="index.html"></a>

Answer 1

There are two ways of doing this. Here&#039;s one -

When you create your normal and rollover images, you can actually create them as one image - the normal image sitting directly above the other with no pixels in between. When you write your css for the normal state, do this -

a:link { background: url(path to your image here) no-repeat; }

For the hover, do this -

a:hover ( background: url(path to the same image here); background-repeat:no-repeat; background-position: center -Zpx; }

The Z value is the height of the images if they were separate images. Since this value will move the image up, what&#039;s happening is the bottom half of the image shows upon hover.

Answer 2

&lt;style type=&quot;text/css&quot;&gt;

a { display: block; }

  a:link.mousie { width: 455px; height: 132px; border: 0; background: url(http://i34.tinypic.com/10ncapu.jpg%7D) no-repeat center scroll; }

  a:hover.mousie { background: url(http://i36.tinypic.com/fdttvp.jpg%7D) no-repeat center scroll; }

  &lt;/style&gt;

&lt;a class=&quot;mousie&quot; href=&quot;URL Path&quot; title=&quot;Mouseover Description&quot;&gt;&lt;span&gt;% nbsp ; &lt;/span&gt;&lt;/a&gt;

Remove spaces for non-breaking space.  Must have as you can&#039;t have empty span tags.

Code/change as you need.  Checked in FF and IE and works.

Ron