Die Hintergrundbeleuchtung von Schaltflächen in Webseiten wird normalerweise mit zwei Bildern organisiert. Wenn Sie den Mauszeiger über das entsprechende Element des Dokuments (Link oder Schaltfläche) bewegen, wird ein Ereignis generiert, das gemäß den Anweisungen in der CSS-Sprache den Browser auffordert, ein Bild in ein anderes zu wechseln. Wenn der Mauszeiger von der Schaltfläche wegbewegt wird, erfolgt die umgekehrte Ersetzung.
Notwendig
Grundkenntnisse in HTML- und CSS-Sprachen
Anweisungen
Schritt 1
Es gibt mehrere Möglichkeiten, einen solchen Hervorhebungsmechanismus zu implementieren. Für jeden von ihnen können Sie denselben HTML-Code verwenden und nur die entsprechende Stilbeschreibung ändern. Der HTML-Code des Buttons kann so aussehen: Text auf dem Button Hier ist die Kennung dieses Seitenelements (id = "btnA"), an das die Stilbeschreibung angehängt wird.
Schritt 2
Um eine der Optionen zu implementieren, müssen Sie zwei Bilder vorbereiten, von denen eines die Schaltfläche in einem inaktiven Zustand zeigt und das zweite mit einer Hintergrundbeleuchtung. Sie werden als Hintergrundbild des Links verwendet. Die CSS-Anweisungen für diese Schaltfläche könnten wie folgt aussehen:
a # btnA, a # btnA: besucht {
Bildschirmsperre;
Breite: 50px;
Höhe: 20px;
Hintergrund: URL (btnA.gif) keine Wiederholung;
Rand: 0;
}
a #btnA: schweben {
Hintergrund: URL (btnA_hover.gif) keine Wiederholung;
Rand: 0;
}
Hier werden im ersten Block die Abmessungen des Bildes angegeben, das den Button darstellt (Breite: 50px; Höhe: 20px;). Sie müssen sie durch die Abmessungen Ihres Bildes ersetzen. Die Namen der Bilddateien sollten auf die gleiche Weise geändert werden: btnA.
Schritt 3
Eine Alternative besteht darin, beide Bilder zu einem Bild zusammenzufügen. Es kann übereinander oder nebeneinander sein. Es wird auch als Hintergrund für den Link verwendet. Da die Schaltflächengrößen in der Schaltflächenstilbeschreibung angegeben sind, ist alles, was nicht hineinpasst, nicht sichtbar. In diesem Fall sollten die in der CSS-Beschreibung platzierten Anweisungen beim Bewegen des Mauszeigers das Hintergrundbild so scrollen, dass der Bereich mit dem Bild der hervorgehobenen Schaltfläche in den Rahmen fällt. Für diese Option muss der Code aus dem vorherigen Schritt wie folgt geändert werden:
a # btnA, a # btnA: besucht {
Bildschirmsperre;
Breite: 50px;
Höhe: 20px;
Hintergrund: URL (btnA.gif) keine Wiederholung;
Rand: 0;
}
a #btnA: schweben {
Hintergrund: URL (btnA.gif) No-Repeat 21px;
Rand: 0;
}
Dies setzt voraus, dass Sie die Bilder übereinander platziert (unten hervorgehoben) und in einer Datei namens btnA.gif"
