Efekt RollOver w CSS

Autor: Bartosz Maciaszek
Data publikacji: 06.04.2007, 10:03

Często zdarza się, że w dokumencie XHTML trzeba umieścić na graficznym "buttonie" efekt rollover. Aby uniknąć kodu JavaScript w kodzie oraz uciążliwych onMouseOver i onMouseOut wystarczy odpowiednio ułożone menu i parę wpisów do CSS:

<style type="text/css">
ul#rollMenu li {
    width: 90px;
    height: 60px;
}
ul#rollMenu li img {
    visibility: hidden;
    border: 0;
    margin: 0;
}
ul#rollMenu li:hover img {
    visibility: visible;
}
</style>

W tagu <body> możemy skorzystać z tego np. w taki sposób:

<ul id="rollMenu">
<li style="background: url(images/abc.jpg);"><a href=""><img src="abcHover.jpg" /></a></li>
<li style="background: url(images/def.jpg);"><a href=""><img src="defHover.jpg" /></a></li>
<li style="background: url(images/ghi.jpg);"><a href=""><img src="ghiHover.jpg" /></a></li>
</ul>

Podesłał: BlueSaibot

Ostatnia modyfikacja: 06.04.2007, 10:03

Waszym zdaniem:

zalun :: 30.01.2008, 18:40 :: #97

Wydaje mi się że lepsze przynajmniej pod względem przejrzystości kodu co ma niebagatelny wpływ na SEO i czytaczy tekstowych jest wykorzystanie jednego obrazka dla wszystkich linków i stanów.

Dzięki temu uzyskuje się "czysty" kod html.
[code]
<ul id='rollMenu'>
<li id='abc'><a href='abc'>ABC</a></li>
<li id='def'><a href='def'>DEF</a></li>
<li id='ghi'><a href='ghi'>GHI</a></li>
</ul>
[/code]

Przygotowujemy obrazek wyglądający tak (podglądnijcie źródło, jeśli nie pokaże we wskaźnikach <pre>), szerokość 300px, wysokość 100px

[code]
.------------.----------.------------.
| abc | def | ghi |
+------------+----------+------------+
| abc over | def over | ghi over |
`------------.----------.------------'
[/code]

CSS
[code]
#rollMenu { list-style: none; }
#rollMenu li { float: left; display: inline; }
#rollMenu a {
outline: none; /* przydatne by zgubic glupia ramke */
display: block;
width: 100px; height: 50px; /* można to oczywiście ustawić dla każdego linku z osobna */
text-indent: -9999px; /* tym usuwamy niechciany tekst */
background-image: url(link_do_obrazka_zbudowanego_w_opisany_powyzej_sposob.xyz);
background-repeat: no-repeat;
}
#abc a { background-position: 0 0}
#abc a:hover { background-position: -50px 0}
#def a { background-position: 0 -100px}
#def a:hover { background-position: -50px -100px}
#ghi a { background-position: 0 -200px}
#ghi a:hover { background-position: -50px -200px}
[/code]

Oczywiście można to rozwinąć na :visited itd.

Pozdrawiam
Piotr
http://piotr.zalewa.info

Twoim zdaniem:

CSS | « Wstecz - Jak zrobić wcięcie w paragrafie?

WebCity.pl

Projektowanie, tworzenie i promocja stron WWW w teorii i praktyce.