Forum PHP.pl > Zmiana obrazka na inny po najechaniu myszką.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana obrazka na inny po najechaniu myszką.

Forum PHP.pl > Forum > Po stronie przeglądarki

Bartech

28.04.2005, 18:19:41

Panie i Panowie, trapi mnie pewno wyzwanie. Wykonałem przycisk SUBMIT do wysyłania FORMa, przycisk ten jest to BUTTON, pozbawiony ramki i z obrazkiem w tle. reasumując jest to obrazek zamiast przycisku SUBMIT.

tak wygląda to w html'u:

Kod

do tego CSS:

Kod

BUTTON.zapisz{width: 68px; height: 21px; background-image: url(layout/zapisz.png); border: none;}

Trapi mnie takie zadanie:
Jak przerobić CSS'a żeby po najechaniu myszką na BUTTON (obrazek zapisz.png) obrazek ten zmienił się na inny (np. zapisz2.png).

TAKI ROLLOVER jak w javie.

Proszę o pomoc, najchętniej o konkretne rozwiązanie (fragment CSS'a).

matid

28.04.2005, 18:36:05

Kod

BUTTON.zapisz{width: 68px; height: 21px; background-image: url(layout/zapisz.png); border: none;}
BUTTON.zapisz:hover{background-image: url('layout/zapisz.png');}

Bartech

28.04.2005, 19:12:31

No chyba nie bardzo. Próbowałem ale obiekt BUTTON nie bardzo chce reagować na "hover".

matid

28.04.2005, 19:36:13

Cytat(Bartech @ 2005-04-28 20:12:31)

No chyba nie bardzo. Próbowałem ale obiekt BUTTON nie bardzo chce reagować na "hover".

Jak to nie reaguje?
http://matid.emmatrade.pl/files/button.html

revyag

29.04.2005, 10:00:33

@matid na ie to nie działa.
@Bartech próbuj tak:

[HTML] pobierz, plaintext 
<button type="submit" name="zapisz" onmouseover="this.style.backgroundImage='url(layout/zapisz2.png)'" onmouseout="this.style.backgroundImage='url(layout/zapisz.png)'">Zapisz</button>
[HTML] pobierz, plaintext

Zajec

29.04.2005, 16:00:01

Cytat(revyag @ 2005-04-29 10:00:33)

@matid na ie to nie działa.

To jego sprawa ;p

Ja bym proponował zostawić to rozwiązanie z CSS'em, a za pomocą komentarzy warunkowych dodawać onmouseouver i onmouseout dla badzIEwi.

Czemu? Nie uzalezniasz podświetlenia w Presto/Gecko/KHTML od włączonego JS.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.