Pasek boczny
Konto
Konto
Szukaj
Szukaj
Ustawienia
Ustawienia
Szukaj

Szukaj w:



Zaawansowane wyszukiwanie
Ustawienia
Przełącz na wersję mobilną
Motyw
Język


Kofeina sklep Dostarczamy czystą kofeinę, z której możesz sam przygotować "energetyka" takiego jak lubisz.
Tonery i tusze do drukarek





Zmiana grafiki po najechaniu na nią kursorem
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Subskrybuj ten wątek
admin
Administrator
Offline

Reputacja: 266

 0     0    
1   26-08-2012, 22:14   
Edytuj ten post      Cytuj     
Witam, chciałbym wam dzisiaj pokazać w krótki sposób jak zmienić grafikę po najechaniu na nią myszką. Efekt można zobaczyć na naszym forum w headerze na buttonach: Start, Blog itp.

Kod:
<a href="Adres www pod który ma przechodzić button gdy na niego klikniemy."><img src="Adres do zwykłej grafiki" onmouseover="this.src='Adres do grafiki, która wyświetla się po najechaniu myszką'" onmouseout="this.src='Adres do zwykłej grafiki'"></a>
janex19950
Użytkownik
Offline

Reputacja: 0

 0     0    
2   28-08-2012, 00:05   
Edytuj ten post      Cytuj     
A nie lepiej w stylach?
admin
Administrator
Offline

Reputacja: 266

 0     0    
3   28-08-2012, 11:39   
Edytuj ten post      Cytuj     
Można i w stylach 2
Comandeer
Przyjaciel
Offline

Reputacja: 0

 0     0    
4   29-08-2012, 12:20   
Edytuj ten post      Cytuj     
Nie można, a trzeba!
on w kodzie tylko śmieci. i JS nie jest od prezentacji, a warstwy logicznej. CSS to prezentacja.
i warto wykorzystać CSS sprites, bo inaczej może się grafika lagnąć 2
Mlody
Użytkownik
Offline

Reputacja: 1

 0     0    
5   03-03-2013, 19:42   
Edytuj ten post      Cytuj     
Moim zdaniem lepsze jest css. Poniżej przykładowe rozwiązanie.

HTML:
Kod:
<a href="odsnosnik.html"><span id="przycisk">Odnośnik</a></span>

CSS:
Kod:
#przycisk{ // tutaj wygląd przycisku
float: left;
padding: 10px;
font-family: Segoe UI light;
color: #fff;
background: #412766;
border: 2px solid #fff;
}
#przycisk:hover{ // tutaj dajemy style które będą aktywne po najechaniu na przycisk
background: #604886;
}

Efektem będzie przycisk taki jak na tym forum. Po najechaniu zostanie jedynie zmieniony kolor przycisku.

Wybaczcie że odkopuje stary temat, ale być może komuś się to przyda.
MazuLuka
Użytkownik
Offline

Reputacja: 0

 0     0    
6   03-03-2013, 20:20   
Edytuj ten post      Cytuj     
Można zrobić też z jednym obrazkiem, ustawiamy tylko pozycję wyświetlania. Plus jest tak, że wczyta się od razu cały obrazek i nie będzie ewentualnego przeskoku w hoverze na wczytanie drugiego obrazka. 1
Comandeer
Przyjaciel
Offline

Reputacja: 0

 0     0    
7   03-03-2013, 20:25   
Edytuj ten post      Cytuj     
ja sobie nie wyobrażam działania z dwoma obrazkami 2 chyba, że zastosujemy poprawny preload, tzn z wykorzystaniem :after z CSS 2.1.
osobiście spotkałem sie także z techniką SVG sprites
Mlody
Użytkownik
Offline

Reputacja: 1

 0     0    
8   03-03-2013, 20:46   
Edytuj ten post      Cytuj     
Jeżeli chodzi o tło to tylko i wyłącznie z jednym obrazkiem w innym wypadku dopiero po najechaniu na przycisk będzie wczytywany ten drugi obrazek. Tak mi się wydaje 2

Poprawka do powyższego css z tłem obrazkowym
Kod:
#przycisk{
float: left;
padding: 10px;
font-family: Segoe UI light;
color: #fff;
background-image: url('grafika.jpg');
background-position: 0px 0px;
border: 2px solid #fff;
}
#przycisk:hover{
background-image: url('grafika.jpg');
background-position: 0px 30px; // przesuwa grafike o 30px po Y
}
GoOx
Przyjaciel
Online

Reputacja: 99

 0     0    
9   17-04-2013, 22:33   
Edytuj ten post      Cytuj     
Można jeszcze użyć CSS 3, czyli tranzition: poprzez to można zrobić animację jakie znamy w JS, Jquery, lecz dużo łatwiej i ładnie to wygląda 1. Ta funkcja działa od zmiany kolorów diva po przesuwanie, zmianę rozmiaru.
GiboneKPL
Techniczny
Offline

Reputacja: 0

 0     0    
10   18-05-2013, 14:13   
Edytuj ten post      Cytuj     
Ludu pomóżcie mi. Mam problem, mam rozwijany panel ale jak kliknę w strzałkę w dół to chciałbym żeby zmieniła się na strzałkę w górę.




Zaloguj się lub zarejestruj, aby odpowiedzieć w temacie.
Dołącz do naszej społeczności!


Zarejestruj się
Posiadasz konto? Kliknij poniżej.


Zaloguj się


Użytkownicy przeglądający ten wątek: 1 gości

Centrum napraw komputerów Warszawa ▪ Szkolenia dla farmaceutów

Portal  Kontakt  Pomoc  Facebook 
© CentrumWindows
Polskie tłumaczenie © 2007-2016 Polski Support MyBB
Silnik forum MyBB, © 2002-2017 MyBB Group
Biznes-Host