how to "hover" with images

[Bruno]

Hi there

using

body A:link { color: #993300; text-decoration:none }
body A:visited { color: #993300;text-decoration:none }
body A:hover { color: #888888;text-decoration:underline }
body A:active { color: #993300; text-decoration:underline }

I could get my browser to change the design of a link.

Now I want to use two images to change the layout on a link

Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */

function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;

This is a javascript example, how can I do this in css?

Thanks for any help

[2metre]

I haven't tested this, so no promises...

for the html:
<a href="whatever" id="button1"><img src="transparent.gif" alt="button1
description"></a>

for the css;
a#button1 {background-image:url(button1.gif); display:block;}
a#button1:hover {background-image:url(button1h.gif);}

The transparent.gif may not be neccessary but, if used, should be a
blank (transparent) image.
I added the display:block because I had problems with the positioning of
backgrounds when doing a fairly similar trick recently.

Hope this does the trick!

Mike