[strona główna] [wcześniejsze wpisy] [późniejsze wpisy] [kontakt] [dodaj do] [rss] (pole wyszukiwarki) [idź]
Przyciski [strona glowna] [wczesniejsze wpisy] [pozniejsze wpisy] [kontakt] i [dodaj do] maja wymiary 100px x 34px, [rss] i [idz] 40px x 34px
Przyciski [strona glowna] i [kontakt] powinny korzystać z pliku p1.gif i zmieniać się na p1a.gif
Przyciski [wcześniejsze wpisy] [poźniejsze wpisy] i [dodaj do] z pliku p2.gif i zmieniać się na p2a.gif
Przyciski [rss] i [idź] z pliku p3.gif i zmieniać się na p3a.gif
Chciałem wykonać porady zawarte tutaj:
http://perfectionorvanity.com/2005/08/2 ... ver-w-css/
http://riddle.pl/-/xhtml/css-rollovers-revisited/
Tzn. połączyć pliki przycisków żeby miały 200px x 34px, gdzie pierwsze 100px jest stanem początkowym, a kolejne 100px stanem po najechaniu myszka. Przeglądarka powinna przesuwać obrazek po najechaniu myszka... Ale nie umiem dość z tym do ładu. Kiedy mam tylko jeden działa, ale jak wstawię więcej to obrazek zamiast się "przesuwać" robi się biały.
- Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="pl"><head><title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
h2 {
float: left;
width: 33%;
}
#p1, #p2, #p3, {
margin: 1em;
clear: both;
}
img { border: none; }
/* ---------------------------- */
#p1 a.rollover {
width: 100px;
display: block;
overflow: hidden;
background: url(/files/p1.gif) -100px 0 no-repeat;
}
#p1 a.rollover img {
display: block;
}
#p1 a.rollover:hover img {
visibility: hidden;
}
#p2 a.rollover {
width: 100px;
display: block;
overflow: hidden;
background: url(/files/p2.gif) -100px 0 no-repeat;
}
#p2 a.rollover img {
display: block;
}
#p2 a.rollover:hover img {
visibility: hidden;
}
#p3 a.rollover {
width: 40px;
display: block;
overflow: hidden;
background: url(/files/p3.gif) -40px 0 no-repeat;
}
#p3 a.rollover img {
display: block;
}
#p3 a.rollover:hover img {
visibility: hidden;
}
</style><!--[if IE 7]><style type="text/css"></style><![endif]--><!--[if lte IE 6]>
<style type="text/css">
a.rollover:hover { display: block; }
#p1 a.rollover:hover { zoom: 1; }
#p2 a.rollover:hover { zoom: 1; }
#p3 a.rollover:hover { zoom: 1; }
</style>
<![endif]--></head><body>
<div>
<div id="p1">
<a class="rollover" href="adres-glownej"><img src="files/p1.gif" alt="Strona startowa" height="34"></a>
</div>
<div id="p2">
<a class="rollover" href="adres-starszych"><img src="files/p2.gif" alt="Starsze wpisy" height="34"></a>
<a class="rollover" href="adres-nowszych"><img src="files/p2.gif" alt="Nowsze wpisy" height="34"></a>
</div>
<div id="p1">
<a class="rollover" href="adres-kontakt"><img src="files/p1.gif" alt="Kontakt z autorem" height="34"></a>
</div>
<div id="p2">
<a class="rollover" href="adres-dodajdo"><img src="files/p2.gif" alt="Dodaj odnośnik do zakładek, ulubionych lub popularnych serwisów, jak wykop czy
gwar" height="34"></a>
</div>
<div id="p3">
<a class="rollover" href="adres-rss"><img src="files/p3.gif" alt="RSS" height="34"></a>
<a class="rollover" href="adres-idz"><img src="files/p3.gif" alt="Szukaj" height="34"></a>
</div>
</div>
</body></html>
