Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek?

[kondziu1291]

Witam. mam dane 2 obrazki:
www.cs-faza.pl/images/fazafilmik.png
www.cs-faza.pl/images/fazafilmik1.png
Chciałbym zrobić z tego button tak, aby po najechaniu na pierwszy obrazek zmienial sie na drugi. Lecz ni HuHu sam tego nie umiem zrobić. Niby w internecie jest tego pełno ale żaden sposób mi nie działa. Jestem początkujący, może dlatego

Oto moj plik css:

Kod:

a.filmiki {
  width: 100px;
  height: 100px;
  border: 0px;
  background: url(images/fazafilmik.png) no-repeat;
}

a.filmiki:hover {
  width: 100px;
  height: 100px;
  border: 0px;
  background: url(images/fazafilmik1.png) no-repeat;
}

a to linia w htmlu:

Kod:

<a class="filmiki">FILMIKI!!!!</a>

z czego taki wynik :

www.cs-faza.pl/probnik.html

POMOCY!

[Kartofelek]

ale kolega kondziu1291 bardzo dobrze zrobił.
Kolego kondziu1291 - daj jeszcze dla linka href, ale resztę zostaw jak miałeś. + poczytan w necie o CSS Sprite.

I daj do styli display:inline-block

[Nicorrtiss]

można też tak w body:

Kod:

<img src="obrazek.jpg" border="0" onmouseover="if(document.images) this.src='obrazek1.jpg'" onmouseout="if(document.images) this.src='obrazek.jpg'">

[Kartofelek]

Móc można, ale nie powinno się.

[ClassAxion]

Znalazłem takie coś:

Kod PHP:

<a href="..."><img src="..." border="0" alt="tekst alternatywny" /></a> 


PS. Poczytaj tu: http://www.kurshtml.boo.pl/html/odsylacz_obrazkowy,odsylacze.html
To by można zrobić MINI filmik w rozszeżeniu .gif I wstawić jako ten po najechaniu

[R_Rafalsky]

background dla <a> ustawiasz oraz inny dla <a:hover> w <a><a/> wstawiasz div o szerokości obrazka i działa

[Kartofelek]

źle
Padawanie twoja ścieżka idzie w złą stronę.

"w <a><a/> wstawiasz div o szerokości obrazka"

Takie rzeczy tylko w html5. W html4 wstawiasz span odpowiednio stylowany, a najlepiej nic nie wstawiasz. Przecież jako background można nawet te wspomniane animacje wstawiać (gif).
Tak więc podsumowując:
- żaden onmouseover, żaden JS
- żadne spany i divy
- zwykły a, który ma stylowanie: display:inline-block; width; height; overflow:hidden; text-indent:-999px (ten ostatni jeżeli na obrazku ma nie byc tekstu)

[mateo]

Połącz te dwie grafiki w jedną. Ustaw pozycjonowanie grafiki tak, by wyświetlała się tylko ta pierwsza. Do a:hover dodaj odstęp, który odsłoni drugą grafikę. Np. jest grafika:
http://putorana.pl/images/mhome.jpg

i do tego style.css

Kod PHP:

.mhome{
background-image: url('images/mhome.jpg');
width: 60px;
height: 40px;
float: left;
display: block;
}

.mhome:hover{
background-image: url('images/mhome.jpg');
width: 60px;
height: 40px;
background-position: 0px -40px;
overflow: hidden;
float: left;
display: block;
} 


[kondziu1291]

dzieki chlopaki