Hogyan lehet megcsinálni html ben azt hogyha egy kép fölé viszem az egeret akkor "benyomódjon" (meg van szerkesztve a "benyomott kép is ")?

Két képet készítenek ehhez.

Az egyik amelyiket látod alapesetben. Ehhez készítenek egy váltó képet. Ugyan az mint az első csak adnak hozzá árnyékot, néhány pixellel lekicsinyítik és elmozdítják a kicsinyítés mértékével jobbra-lefelé. Ez a változás az ami olyan hatást kelt mintha benyomták volna.

Ehhez pedig adnak egy url címet.

Igazából kell hozzá némi html és javascript ismeret.

Itt találsz egy hasonló elven működő képet, de itt még nincs url hozzáadva.

[link]

Nem kell hozzá javascript. Ezt CSS-ben szokás már jó ideje.

.gomb {

background: url('normalgomb.jpg');

}

.gomb:hover {

background: url('benyomottgomb.jpg');

}

Aztán a gomb-ra (ez lehet egy DIV vagy BUTTON vagy bármi) ráadsz egy class="gomb" tulajdonságot és kész.

Az előző válaszolónak igaza van, hogy elég hozzá CSS. De annyit megjegyeznék, hogyha a képet külön kell betölteni, mikor ez az egérkurzor a képre van helyezve, akkor a betöltődés idejéig el fog tűnni a kép. Ennek kiküszöbölésére találták ki a CSS sprite-okat.

[link]

JavaScripttel is betöltheted a képeket előre, de CSS-sel sokkal könnyebb és elegánsabb megoldani.

Hát elég régi bejegyzés de hátha valaki eltéved erre és olvassa

Itt egy megoldás csak HTML kóddal ami sokszor jól jön

<a href="#" ><img src=" kep1.png " nmouseover="this.src=' kep2.png '" onmouseout="this.src=' kep1.png '" /></a>

Na ujra a kod mert az elöbb elgépeltem kimaradt egy o

onmouseover helyet nmouseover írtam és sajnos nem lehet javitani a már beküldött válaszokat

TEHÁT CSAK HTML

<a href="#" ><img src=" kep1.png " onmouseover="this.src=' kep2.png '" onmouseout="this.src=' kep1.png '" /></a>