Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

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