- Porad: 21
- Tutoriali: 6
- Tekstów: 8
- STATYSTYKA
Zazwyczaj efekt rollover kojarzy się wszystkim z Java Script, a nawet jeśli z CSS to uważają że w CSS obrazki się wolniej zamieniają. Można wykorzystać zrobienie z 2 obrazków 1 obrazek.
Np.:
Obrazek po połączeniu ma wysokość 108px, więc połowa z tego to 54px - taką wysokość dajemy linkowi, przy atrybucie hover musimy nadać ujemną pozycje tła - przeciwna ilość pikseli do ilości pikseli w wysokości
a.rollover {
display:block;
width:99px;
height:54px;
background:url(../img/rollover.png);
}
a.rollover:hover {
background-position:0 -54px;
}
Zaznaczony wyżej kod odpowiada ze zmiane położenia obrazka. Poniżej kod HTML do wyświetlenia linka.
<a href="#" class="rollover"></a>
Przykład:
