Změna obrázku po najetí myši

Ahoj,

nevím jestli by šlo pomocí CSS udělat to, že když mám obrázek jako odkaz, tak aby po najetí myši se ten obrázek změnil v jiný.

Díky

Ok - nějak to zkusim vyřešit.

Když mám tenhle kód tak to sice funguje, ale jen v IE a v mozzile mi to akorát ty obrázky otočí a pak se mi ani nezobrazí ten druhý obrázek jako v IE.
Nevim jak to sparvit.

Jo tak je to takhle:

Tak teď jsem to předělal, ale nejde mi do kódu zakompońovat ten kus stěma obrázkama zobrazujícími se v bubleně.

Podívejte se na
www.masozravky.unas.cz/1024x768/index3.htm

Díky za pomoc

No to mi nějak moc nepomohlo. Já právě potřebuju mít dohromady funkční kód měnícího se obrázku a zárověň aby se mi zobrazil obrázek v tý bublině. Kódy mám takhle:

/*pozice obrázku*/

.cephalotus_pozice {top: 0px; left: 0px; z-index:12}


/*kód který způsobý ten text nebo obrázek v bubleně u myši*/

a.cephalotus {position:relative; z-index: 1}

a.cephalotus:hover { z-index: 10; background-color:#ff0}

a.cephalotus big {display: none}

a.cephalotus:hover big { /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 0px; left: 135px; width: 130px;
border: 1px solid #008000;
text-align: center;
}

/*záměna tlačítek*/

div.cephalotus_ {
float: left;
width: 132px; height: 34px;
background: url( '../pix/tlacitka/cephalotus_active.png' ) 0 no-repeat;
}

div.cephalotus_ a {
display: block;
margin: 0; padding:0;
width:132; height:34;
overflow:hidden;
background: url( '../pix/tlacitka/cephalotus_unactive.png' ) top left no-repeat;
}
div.cephalotus_ span {
display: block;
}
div.cephalotus_ a:hover {
background-position: -134;
}


No a z tohohle kódu potřebuju udělat funkční kód, prostě někde je chyba a já sem ji nenašel ani po 3 hodinách - fakt nevim.
Tady je ještě HTML kód odkazu:

<span class="cephalotus"><div class="cephalotus_">
<a href="odkazy/cephalotus.htm" target="_self" title="Cephalotus (Láčkovice)" class="cephalotus"><span><img src="pix/obrazky_menu/cephalotus.gif"></span>
</a></span></div>


Díky