Was sind Rolloverbutton?
Wenn man die Maus über einen Button bewegt und dieser Button
sich dann verändert(in welcher art auch immer).
Was sind Donebutton?
Wenn man einen Button angeklickt hat und dieser sich dann für
den User für immer verändert (um zu sehen das man das schon gesehen hat)
–
zum erstellen solcher Button braucht man schon etwas Übung in Html und CSS
„“Als Beispiel gehen wir mal davon aus wir wollen eine Seite über unser Sonnensystem machen.““
Als erste sollte man mit einem Grafikprogramm(Paint, Paint Pro-Shop,Adobe CS3, etc.), pro Button ,der später mal auf der Seite sichtbare sein soll, 3(verschiedene) Button erstellen die man gut erkennbar beschriften sollte.
„“also wir fangen mit der Sonne an und erstellen 3 gleichgroße Button die alle ungefähr gleich aussehen. Man sollte die Schrift nicht verändern und auch den Rahmen (sofern vorhanden) nicht, damit man immer erkennt was angeklickt wird. Wir nenne den normalen Sonnenbutton (der normal angezeigt werden soll) sonne.jpg
(nicht vergessen bei CS3 kann man für web speichern das spart Platz und Loadingtime, und ACHTUNG bei den Endungen es muss .gif .png oder .jpg sein kein 24bit.datein benutzen und sie muss auch im Script richtig angegeben sein und vor allem immer auf Groß- und Kleinschreibung achten, am besten alle Button klein beschriften)
den Button für rollover nennen wir sonner.gif und den donebutton sonned.png damit wir sie nicht verwechseln und die Endungen beachten.““
(also nichts für dem normalen button, r = rollover, d= done)
jetzt schreiben wir in CSS
#rollovermenu1 a {
height: 40px;
width: 171px;
display: table-cell;
background: url(„sonne.jpg“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu1 a:hover {
background: url(„sonnr.gif“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu1 a:active {
background: url(„sonned.png“) 0px 0px no-repeat;
text-decoration:none;
}
„“ um Übersicht zu erhalten kann man die Button auch in Ordner hoch laden das sieht dann so aus:
„“ background: url(„ordnername/sonne.gif“) 0px 0px no-repeat; „“
keine Button Namen oder Ordner Namen mit Leerzeichen das bringt nur Probleme „“
im html script muss dann nurnoch stehen
<!– sonne –>
<div id=“rollovermenu1″>
<a href=“sonne.html“> </a>
„“ hierbei würde ich empfehlen immer mit <!– TEXT–> zu beschriften um Verwirrung zu vermeiden, diese wir nur im Script angezeigt und hat keine Auswirkung auf die Seite „“
Das kann man nun immer so weitermachen.
______________________________________________________________________________________________
hier nochmal 2 Beispiel für Erde und Mars
(die Bilder heißen erde.jpg , erder.gif und erded.png (also nichts für normal, r = rollover, d= done)
(in CSS)
#rollovermenu2 a {
height: 40px;
width: 171px;
display: table-cell;
background: url(„erde.jpg“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu2 a:hover {
background: url(„erder.gif“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu2 a:active {
background: url(„erded.png“) 0px 0px no-repeat;
text-decoration:none;
}
(in Html)
<!– erde –>
<div id=“rollovermenu2″>
<a href=“erde.html“> </a>
immer auf die Nummer bei #rollovermenu x achten die muss man pro Button 3 mal eintragen werden
#rollovermenu2 a {
…………..
…………….
}
#rollovermenu2 a:hover {
……………….
…………………….
}
#rollovermenu2 a:active {
…………..
……………………
}
(die Bilder heißen mars.gif , marsr.jpg und marsd.jpg)
(in CSS)
#rollovermenu3 a {
height: 40px;
width: 171px;
display: table-cell;
background: url(„mars.gif“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu3 a:hover {
background: url(„marsr.jpg“) 0px 0px no-repeat;
text-decoration:none;
}
#rollovermenu3 a:active {
background: url(„marsd.jpg“) 0px 0px no-repeat;
text-decoration:none;
}
(in html)
<!– mars –>
<div id=“rollovermenu3″>
<a href=“mars.html“> </a>
Wenn sie Probleme mit der Position von diesen Button haben lesen sie:“ Button mit HTML-Tabellen positionieren“.