Pasek boczny
Konto
Konto
Szukaj
Szukaj
Ustawienia
Ustawienia
Szukaj

Szukaj w:



Zaawansowane wyszukiwanie
Ustawienia
Przełącz na wersję mobilną
Motyw
Język
Portale internetowe Kissdigital.pl - rozwiązania mobilne Kofeina sklep
Projekt, budowa i promocja - budujemy kompleksowo portale internetowe w oparciu o Drupal. Zaawansowane aplikacje mobilne - bogate portfolio. Dostarczamy czystą kofeinę, z której możesz sam przygotować "energetyka" takiego jak lubisz.




Zmiana grafiki po najechaniu na nią kursorem
  • 0 Głosów - 0 Średnio
  • 1
  • 2
  • 3
  • 4
  • 5
Subskrybuj ten temat
admin
Administrator
Offline

Reputacja: 266

 0     0    
1   26-08-2012   22:14   
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   
A nie lepiej w stylach?
admin
Administrator
Offline

Reputacja: 266

 0     0    
3   28-08-2012   11:39   
Można i w stylach 2
Comandeer
Przyjaciel
Offline

Reputacja: 0

 0     0    
4   29-08-2012   12:20   
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   
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   
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   
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ą

Goście nie widzą linków. Zarejestruj się na forum klikając tutaj.


Mlody
Użytkownik
Offline

Reputacja: 1

 0     0    
8   03-03-2013   20:46   
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
Offline

Reputacja: 97

 0     0    
9   17-04-2013   22:33   
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   
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 temat: 1 gości

Centrum napraw komputerów Warszawa ▪ Apartamenty w Kościelisku ▪ Szkolenia dla farmaceutów ▪ Youboost Łukasz Wudyka

Portal  Kontakt  Pomoc  Facebook 
© CentrumWindows
Tłumaczenie © 2007-2014 Polski support MyBB
Skrypt forum MyBB, © 2002-2016 MyBB Group
Biznes-Host