Mouse-Over-Button ohne JavaScript

[Admin]

Da es Besucher deiner HP gibt welche JavaScript standardmäßig abgeschalten haben schauen diese bei einem JavaSript gesteuerten Menü in die Röhre. Nun es geht auch anders. Anhand zweier Button zeige ich dir hier die Vorgehensweise. Diese kannst du leicht an deine HP anpassen.
Für den Mous-Over-Effekt benötigst du zwei Button. Einen für den Ruhe-Zustand und den Anderen für den Zustand bei Mous-Over. In meinen Beispielen habe ich einmal die Variante mit fertigen Gif's gewählt, also die Beschriftung ist schon in den Bildern enthalten. Und in der anderen Variante ist es eine separate Beschriftung und ist dadurch noch flexibler einzusetzen und auch schneller in der Übertragung.

Hier eine Vorschau.
Und hier die Button zum Download.

Variante1
Erstelle ein div und die folgenden Regeln.

Code: Alles auswählen

.f-button {
  background-image: url(bilder/impressum1.gif);
  background-repeat: no-repeat;
  display: block;
  width: 130px;
  height: 40px;
  text-decoration: none;
}

Code: Alles auswählen

#button1 {
  height: 80px;
}

Code: Alles auswählen

#button1 a:hover {
  background-image: url(bilder/impressum2.gif);
  background-repeat: no-repeat;
}

Code: Alles auswählen

em {
  visibility: hidden;
}

Weise dem div die ID #button1 zu. Schreibe das Wort Impressum und markiere es. Danach weist du ihm den Link „#“ zu. Den Link formatierst du jetzt mit der zugewiesenen Klasse „.f-button“ und dein Zwischenergebnis ist jetzt ein Button mit dem noch sichtbaren Link „Impressum“. Diesen formatierst du jetzt mit „hervorgehoben“ (Tag <em>). Wenn alles richtig gelaufen ist dann siehst du jetzt nur den Button. Ist aber alles verschwunden so liegt folgender Fehler vor:
Im Quelltext sieht dein Code so aus:

<div id="button1">Mous-Over-Button mit fertigen Gif's<br><br><em><a
class="f-button" href="#">Impressum</a></em></div>

Richtig aussehen muss er aber so. Ändere ihn entsprechend ab.

<div id="button1">Mous-Over-Button mit fertigen Gif's<br><br><a
class="f-button" href="#"><em>Impressum</em></a></div>

Fertig. Auf zur nächsten Variante.

Variante 2
Erstelle ein div und die folgenden Regeln.

Code: Alles auswählen

.l-button {
  display: block;
  width: 130px;
  height: 40px;
  background-image: url(bilder/button.png);
  background-repeat: no-repeat;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: black;
}

Code: Alles auswählen

#button2 {
  height: 80px;
}

Code: Alles auswählen

#button2 a:hover {
  background-image: url(bilder/button-hover.png);
  background-repeat: no-repeat;
}

Weise dem div die ID #button2 zu. Schreibe das Wort Impressum und markiere es. Danach weist du ihm den Link „#“ zu. Den Link formatierst du jetzt mit der zugewiesenen Klasse „.l-button“ und dein Zwischenergebnis ist jetzt ein Button mit dem sichtbaren Link „Impressum“. Diesen formatierst du
über die Text-Einträge der Klasse „.l-button“ . Die hier sind text-align, line-height und color.

Hier noch einmal das Ergebnis.

Viel Spaß beim Nachbau.

Dieses Tutorial wurde am 21. Jan 2008 von gimp-michel auf KompoZer-Web veröffentlicht.