+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? (/thread-jak-zrobic-button-by-po-najechaniu-myszka-zmienil-sie-na-inny-obrazek)
Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - kondziu1291 - 04-03-2011
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!
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - Kartofelek - 04-03-2011
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
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - Nicorrtiss - 04-03-2011
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'">RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - Kartofelek - 04-03-2011
Móc można, ale nie powinno się.
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - ClassAxion - 07-03-2011
Znalazłem takie coś:
Kod PHP:
<a href="..."><img src="..." border="0" alt="tekst alternatywny" /></a>
To by można zrobić MINI filmik w rozszeżeniu .gif
I wstawić jako ten po najechaniu
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - R_Rafalsky - 07-03-2011
background dla <a> ustawiasz oraz inny dla <a:hover> w <a><a/> wstawiasz div o szerokości obrazka i działa
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - Kartofelek - 07-03-2011
ź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)
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - mateo - 07-03-2011
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;
}
RE: Jak zrobić button, by po najechaniu myszką zmienił się na inny obrazek? - kondziu1291 - 08-03-2011
dzieki chlopaki