Mehrfach Button-Hintergrund mit einer Bild-Datei (I)

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Mehrfach Button-Hintergrund mit einer Bild-Datei (I)

Beitrag von Admin » Di 19. Aug 2014, 16:12

Button einer Navigation werden im Allgemeinen in drei Schaltzuständen dargestellt.
1.Normalzustand (Aus)
2.Wenn du mir der Maus darüber gleitest (Mouse-Over)
3.Angeklickt (Ein)

Nun kannst du für jeden Schaltzustand eine eigene Bilddatei erstellen oder zur Vereinfachung alle (in diesem Tut 3) Schaltzustände in einer Datei (s.u.)zusammen führen und dir damit die Arbeit ein wenig erleichtern.
Bilddatei mit den 3 Schaltzuständen:
Bild

Hier eine Vorschau für die Anwendung dieser Bilddatei.
Die Anwendung sehen wir uns jetzt im Detail genauer an. Öffne den KompoZer und erstelle im Ordner deiner Wahl eine neue Datei und speichere sie ab. Erstelle im CSS-Editor die folgende Regel

Code: Alles auswählen

#test {
  width: 500px;
  height: 140px;
}
Erstelle nun ein div und weise ihm die ID #test zu. In dem div schreibst du die Worte „ Normalzustand, Mouse-Over, Angeklickt“ untereinander und markierst sie danach. Formatiere sie als ungeordnete Liste und erstelle für alle einen Link „#“. Zur Formatierung der Liste erstelle diese Regeln:

Code: Alles auswählen

#test ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#test li {
  margin-left: 30px;
}
Für die Zuweisung der entsprechenden Bilder zum jeweiligen Schaltzustand nimmst du die Klassen .button1 bis .button3

Code: Alles auswählen

.button1 {
  background-image: url(button.gif);
  background-repeat: no-repeat;
  display: block;
  width: 150px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  line-height: 30px;
}
.button2 {
  background-image: url(button.gif);
  background-repeat: no-repeat;
  background-position: left center;
  width: 150px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: block;
}
.button3 {
  background-image: url(button.gif);
  background-repeat: no-repeat;
  background-position: left bottom;  
  width: 150px;
  height: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
}
Der Unterschied der Klassen liegt eigentlich nur in der richtigen Auswahl des Bildausschnitts für den Schaltzustand. Das obere Drittel des Bildes für den Normalzustand wählst du aus durch die Hintergrund-Position „links-links“. Für Mouse-Over nimmst du die Hintergrund-Position „links-mitte“ und für Angeklickt die Hintergrund-Position „links-unten“. Die Zuweisung der Klassen erfolgt über den <li>Tag. Klicke den Link, welchem du eine Klasse zu weisen willst, an und in der untersten Leiste erscheinen die Tags. Klicke den <li>Tag mit der rechten Maus-Taste an und über den Menüpunkt Klassen weist du ihm die Klasse zu. Button1 ==> .button1 usw.

Jetzt formatierst du noch die Links (Element a), um die Unterstreichung zu eliminieren, mit folgender Regel.

Code: Alles auswählen

a {
  text-decoration: none;
}
Das Ergebnis sollte so aussehen (oberes Menü)
Jetzt bringst du noch ein bisschen Bewegung hinein in dem du für die Links noch die Pseudoklasse :hover definierst.

Code: Alles auswählen

#test li a:hover {
  width: 150px;
  height: 30px;
  display: block;
  background-image: url(button.gif);
  background-repeat: no-repeat;
  background-position: left center;
}
Fertig.

Nun wirst du dich fragen warum ich nur :hover definiert habe und nicht die ganzen anderen Pseudoklassen welche es noch für Links gibt. Im Prinzip recht einfach, denn es ist leider immer noch so, dass nicht alle Browser mit den anderen Pseudoklasse zu recht kommen. Und bevor etwas auf meiner HP in einem anderen Browser nicht funktioniert gehe ich lieber diesen sicheren Weg.

Die anderen Menüs auf der Vorschau-Seite sind nur ein Anwendungs-Beispiel und sollten im Nachbau kein Problem mehr darstellen. Wie du sicherlich bemerken wirst wird die Klasse .button2 hier nicht mehr benötigt, da du ja die Pseudoklasse :hover definiert hast. Sie diente am Anfang lediglich für Demonstrationszwecke.

Viel Spaß beim Nachbau.
Dieses Tutorial wurde am 24.01.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten