-
Hover - kompletny poradnik
dodano 18.12.2007 / komentarzy: 6 / autor: palmiakKilka osób z forum grafart.org poprosiło mnie o kilka porad dotyczących hovera, czyli najazdu. Niby krótki i prosty temat a można wykorzystać na setki sposobów. W tym artykule postaram się przybliżyć chociaż kilka ciekawych zastosowań.
Podstawy
Dla niektórych
hover, kończy się na pseudoklasie CSS, dzięki której można zmienić kolor linka lub podmienić obrazek. Jakby nie patrzeć jest to główne zastosowanie. Wystarczy, ze napiszemy:a {color:red;}
a:hover {color:blue;}i już po najeździe link zmienia nam kolor z czerwonego na niebieski.
Z obrazkami jest podobnie:
a {width:100px;
height:100px;
display:block;
background:url(obrazek1.jpg);
}a:hover {
background:url(obrazek2.jpg);
}Wszystko działa, jest cacy. Wszystko? No właśnie nie. W przypadku z obrazkami pojawia się problem w postaci chwilowego czekania na wczytanie się drugiego obrazka. Czy da się to naprawić? Oczywiście, że tak - do tego służy technika sliding-doors, o której za kilka akapitów napiszę.
Można sobie jeszcze zadać pytanie czy tylko
<a>można nadać stan pseudoklasę hover. W każdej normalnej, nowoczesnej przeglądarce można hover nadawać wszystkiemu, ale oczywiście jest IE. Na szczęście i to da się ominąć.Sliding doors
Ta technika ma na celu przeciwdziałanie tej chwili czekania na wczytania nowego obrazka. Jak? W najbanalniejszy sposób jaki się dało wymyślić - zamiast korzysać z dwóch obrazków skorzystano z jednego na którym są pokazane oba “stany” obrazka. Mając taki obrazek za pomocą CSS pozostało nam już przesunąć tło.
To do roboty - najpierw przygotowywujemy obrazki. Na górze dajemy wygląd po najeździe, a na dole przed. Oto przykład:
Następnie w naszym dokumencie umieszczamy ten obrazek jako tło
<a><a href="#" id="button"></a>Pozostaje nam już tylko dopisać styl:
a#button {
display:block;
height:43px;
background:url(images/rss.png) no-repeat;
width:91px;
}a#button:hover {
background-position:0 -43px;
}Przykład do podejrzenia tutaj.
A co z IE?
W IE, w pewnych sytuacjach można albo kombinować jak koń pod górkę, żeby najazd był zawsze na link (polecam stronę cssplay.com), albo pójść na łatwiznę i dojść do dwóch wniosków:
- najczęściej podświetlenie elementów jest tylko elementem ozdobnym, a jeśli nie (np. rozwijane menu) to strona jest tak skonstruowana, że fakt nie działania tego menu nie przeszkodzi w nawigacji
- ilość ludzi, którzy mają IE z wyłączonym javascript jest śladowa
Zdając sobie sprawę z tych dwóch rzeczy (szczególnie drugiej częście pierwszego punktu) możemy spokojnie przerzucić odpowiedzialność za hovery w IE na jQuery.
A w jQuery, gdyby nam się zachciało, że podświetlać
<li>najpierw w stylu musimy przygotować sobie klasę, np. najazd, następnie wystarczy napisać:$(‘li’).hover(function() {
$(this).addClass(‘najazd’);
}, function() {
$(this).removeClass(‘najazd’);
});Oczywiście w klasie
najazdpiszemy jak chcemy żeby nasze<li>wyglądało po najeździe.Przykład możecie zobaczyć tutaj. W IE najazd też działą, mimo, że ne ma żadnego
a.Menu rozwijane
Zrobimy sobie menu, którego głowne pozycje będą w poziomie, a po najeździe a poszczególne pozycje pojawi nam się podmenu. Nie będzie wielkim zaskoczeniem jesli powiem, że pomoże nam jQuery.
<ul>
<li><a href="#">Pozycja pierwsza</a>
<ul>
<li>podpozycja 1</li>
<li>podpozycja 2</li>
<li>podpozycja 3</li>
</ul>
</li>
<li><a href="#">Pozycja druga</a>
<ul>
<li>podpozycja 1</li>
<li>podpozycja 2</li>
<li>podpozycja 3</li>
</ul>
</li>
<li><a href="#">Pozycja trzecia</a></li>
<li><a href="#">Pozycja czwarta</a></li>
</ul>Teraz to ostylujemy tak, żeby ułożyć wszystko tak jak chcemy oraz żeby ukyć te wewnętrzne listy:
* {
padding:0;
margin:0;
}ul {
list-style:none;
}ul li {
width:150px;
float:left;
background:yellow;
position:relative;
}ul ul {
display:none;
}.show {
display:block;
position:absolute;
top:0x;
left:0px;
width:150px;
}Na koniec pozostaje nam już tylko zabawa z jQuery. Chodzi nam o to, żeby po najechaniu na odpowiednie
<li>pokazał się odpowedni zagnieżdzony<ul>. Żeby to osiągnąć piszemy w następujący skrypcik:$(document).ready(function(){
$(‘ul li’).hover(function() {
$(this).children(‘ul’).addClass(’show’);
}, function() {
$(this).children(‘ul’).removeClass(’show’);
});
});Powinno działać tak jak na przykładzie.
Podsumowanie
Mam nadzieję, że dzięki temu poradnikowi nie będziecie mieć już problemów z tym jak używać hover. Oczywiście to co przedstawiłem to tylko kilka przykładów - reszta jest ograniczona tylko Waszą wyobraźnią.
Komentarze / dodaj komentarz
autor: Hover - kompletny poradnik | Tworzenie stron www. Projektowanie
dodano: 27.12.2007
[...] Kilka osób z forum grafart.org poprosiło mnie o kilka porad dotyczących hovera, czyli najazdu. Niby krótki i prosty temat a można wykorzystać na setki sposobów. W tym artykule postaram się przybliżyć chociaż kilka ciekawych zastosowań. (more…) [...]
autor: Flacktub
dodano: 06.07.2008
Chcę zauważyć że na “Menu rozwijane” jest także 2 sposób którego nie opisałeś… na samych hoverach beż js…
autor: palmiak
dodano: 06.07.2008
Zgadza się - na cssplay można znaleźć wersję która jest tylko na samych hooverach. Trzeba tam tylko pododawać dla IE tagi tabelowe.
autor: Flacktub
dodano: 06.07.2008
Chodzi mi o coś takiego :
http://www.flacktub.yoyo.pl/menu/
autor: palmiak
dodano: 06.07.2008
Odpal IE6 i zobacz jak to działa.”Cały myk polega na tym, że łatwo jest zrobić menu, które będzie działać bez js w operze, safari, fx. W ie jest o wiele trudniejsze. Przyznam się, że z lenistwa w przykładzie zrobiłem to tylko na bazie js, a mogłem zrobić tak, zeby w normlanych przeglądarkach działało bez js, a tylko w ie by było wspomaganie js.
autor: Flacktub
dodano: 06.07.2008
Dzięki za wyjaśnienie…
ale dzięki.
niestety nie mogę tego zobaczyć ponieważ posiadam IE 7
Napisz komentarz