AW: Image Ready Code [Slice + Rollover] - Frage
Doppelpost für Bump.
Wie es der Zufall so will, hab ich jetzt kurz Zeit dies zu erklären.
Also, als erstes erstellst du deine 2 zustände je link (grafik) und machst sie in einer Datei. Also Hoverzustand oben und Normaler zustand unten in der Gleichen Grafik. Die grfik sollte die breite der Zustände haben und 2x die höhe eines einzelnen Zustand. Vorausgesetzt du hast beide zustände für ein Link auf die gleiche höhe und breite.
Dann speicherst du es ab als eine Datei. Hoffe es war soweit verständlich. Wenn nicht einfach erwähnen. Hab grad keine beispiel bilder zur hand.
In deiner HTML Datei machst du für deine Navi folgendes:
Code:
<div id="navi">
<ul>
<li><a href="#" class="home" title="Home"><span>Home </span></a></li>
<li><a href="#" class="bio" title="Biografie"><span>Biografie </span></a></li>
<li><a href="#" class="media" title="Media"><span>Media </span></a></li>
</ul>
<br />
</div>
Den rest machste mit CSS. Ich habe hier nicht deine Maße für deine Grafik, daher gehe ich von beispiel Maße aus. jede Navi Grafikelement nehme ich 100px Breite und 50px Höhe:
Code:
#navi {
width: 300px;
height: 45px;
background-image: url(../img/navi_bg.gif); /* Wenn eine Grafische hintergrund vorhanden ist */
background-repeat: repeat-y;
margin: 0 auto 5px auto;
}
#navi ul {
width: 300px;
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
#navi ul li {
display: inline;
padding: 0;
}
#navi ul li a {
margin: 0 0 0 25px; /* Linker Abstand der einzelne Navi Elemente */
}
#navi li a.home:link, #navi li a.home:visited {
background-image: url(../img/home.jpg);
background-position: 0 -50px;
display: block;
float: left;
margin: 0 0 0 10px; /* Linker Abstand des ersten Link Elements zum layout rahmen wenn erwünscht, ansonsten alles auf 0 */
padding: 0;
width: 100px;
height: 50px;
}
#quick_nav li a.home:hover, #quick_nav li a.home:active {
background-image: url(../img/home.jpg);
background-position: 0 0px;
display: block;
float: left;
margin: 0 0 0 10px; /* Linker Abstand des ersten Link Elements zum layout rahmen wenn erwünscht, ansonsten alles auf 0 */
padding: 0;
width: 100px;
height: 50px;
}
#quick_nav li a.bio:link, #quick_nav li a.bio:visited {
background-image: url(../img/bio.jpg);
background-position: 0 -50px;
display: block;
float: left;
padding: 0;
width: 100px;
height: 50px;
}
#quick_nav li a.bio:hover, #quick_nav li a.bio:active {
background-image: url(../img/bio.jpg);
background-position: 0 0px;
display: block;
float: left;
padding: 0;
width: 100px;
height: 50px;
}
#quick_nav li a.media:link, #quick_nav li a.media:visited {
background-image: url(../img/media.jpg);
background-position: 0 -50px;
display: block;
float: left;
padding: 0;
width: 100px;
height: 50px;
}
#quick_nav li a.media:hover, #quick_nav li a.media:active {
background-image: url(../img/media.jpg);
background-position: 0 0px;
display: block;
float: left;
padding: 0;
width: 100px;
height: 50px;
}
#navi li span {
display: none;
}
#navi br {
clear: both;
}
Wenn du das so machst, musst du natürlich die Maße an deine anpassen. Der vorteil davon liegt auf der hand. Du brauchst nicht mehrere Grafiken, denn beide zustände sind in einer Bilddatei vorhanden. Je nach zustand wird das Bild per CSS verschoben. Du musst also keine JS Preloader erstellen damit der Wechsel für den benutzer nicht mit eine Unschönen nachladen verbunden ist. Zudem schonst du Traffic und bei deaktiviertem JS kann der User dennoch dein Rollover Effekt sehen. Das wichtigste, es ist Standardkonform und für Screenreader geeignet. Auch für Deaktiviertem CSS wo die Navi nicht als Grafisches zu sehen ist, ist Die navi an sich dennoch zu sehen. Kannste testen wenn du es hast indem du im Firefox oder Opera CSS Stile deaktivierst.
Ich habe seit ich das kenne nur noch solche Rollovers erstellt und es ist viel besser als JS Rollovers ,-)
