Hogyan tudom megldani ezt?

Több lehetőséged is van:

1.

#kep{

width:100px;

height:20px;

background:url(kep1.jpg) top center no-repeat;

}

#kep:hover{

background:url(kep2.jpg) top center no-repeat;

}

2.

A a megjelenítendő képek két állapotát egy képre rakod egymás alá, így nem lesz villogás.

Jelen esetben a kép mérete, mely mindkét állopotot tartalmazza ,legyen 100px*40px. A div magassága pedig 20px lesz, és csak a kép függőleges helyzetével kell játszani.

#kep{

width:100px;

height:20px;

background:url(kep.jpg) top center no-repeat;

}

#kep:hover{

background:url(kep.jpg) bottom center no-repeat;

}

3. JavaScripttel

Ehhez nézz utána az onmouseover és onmouseout-nak. Célszerű preloadert készíteni a képekhez.

Ha az első megoldást használnád, akkor a villogás elkerülése végett célszerű javascripttel a második képet előre betölteni.

Szvsz a legegyszerűbb a 2. megoldás.

Akkor én írom a javascriptes megoldást:

Ez a képed:

<img src="kepnev0.jpg">

Hover effectes kép:

<img src="kepnev0.jpg" onmouseover="this.src='kepnev1.jpg';" onmouseout="this.src='kepnev0.jpg';">

A CSS hover effectet sajnos a korábbi böngészők nem szokták elfogadni (pl Ie7 sem), erre van egy kombinatív megoldás:

<img src="kepnev0.jpg" class="normalkep" onmouseover="this.ClassName='hoverkep';" onmouseout="this.ClassName='normalkep';">

Persze ehhez a két class-t deklarálni kell a css fájlban, mint az előttem szóló példájában.

A DOM-ot nem támogató böngészők nem használják a legutóbbi megoldást!