Rollover
CSS + FIR text-indent
Przykład
a {
display: block;
width: 300px;
height: 100px;
background: url('witaj.png') no-repeat;
text-indent: -2000em;
}
a:hover {
background: url('witaj-on.png') no-repeat;
}
...
<p>
<a href="index.html">Witaj</a>
</p>
CSS + FIR warstw
Przykład
a {
display: block;
width: 300px;
height: 100px;
position: relative;
}
a span {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100px;
background: url('witaj.png') no-repeat;
}
a:hover span {
background: url('witaj-on.png') no-repeat;
}
Rollover - tekst na obrazie
Przykład
a {
display: block;
width: 300px;
height: 100px;
background: url('button.png') no-repeat;
text-align: center;
line-height: 100px;
color: black;
text-decoration: none;
}
a:hover {
background: url('button-on.png') no-repeat;
}
<a href="index.html">Witaj</a>
Rollover - na liście i obrazie
Przykład
- Ćwiczenie 39.4 w książce W. Gajdy HTML5 i CSS3
- Ćwiczenie 39.5 w książce W. Gajdy HTML5 i CSS3
- Ćwiczenie 40.10 w książce W. Gajdy HTML5 i CSS3