Typischerweise werden grafische Pfeile auf Websites verwendet, um die Navigation zu organisieren. Wenn Sie auf einen solchen Zeiger klicken, gelangen Sie zu einer anderen Seite oder zu einem anderen Abschnitt der aktuellen Seite. Manchmal sind einige Aktionen damit verbunden - Hervorheben des Inhalts des Tag-Felds, Starten eines JavaScript-Skripts usw. Um hervorzuheben, dass dieser Pfeil ein aktives Element ist, verwenden Sie den "Highlight"-Effekt, d.h. Änderungen im Aussehen bei Mouseover.
Notwendig
Grundkenntnisse in HTML- und CSS-Sprachen
Anweisungen
Schritt 1
Bestimmen Sie, welcher Mechanismus zur Implementierung der Pfeilhervorhebung für Sie am besten geeignet ist. Es gibt mehrere davon, zwei einfache werden in den folgenden Schritten dieser Anleitung gegeben. Beide verwenden die CSS-Hover-Pseudoklasse. Wenn sich der Mauszeiger über einem Grafikelement (Pfeil) befindet, wird der in dieser Pseudoklasse beschriebene Stil darauf angewendet, und die restliche Zeit ist dieser Stil nicht aktiv. Für beide unten beschriebenen Optionen können Sie dasselbe HTML verwenden Code, aber unterschiedliche Stilbeschreibungen. Der Pfeilcode in der Seitenquelle kann wie folgt geschrieben werden: Das Attribut id gibt den Link-Identifikator (arrowA) an, anhand dessen der Browser bestimmt, welche der Stilbeschreibungen darauf angewendet werden sollen.
Schritt 2
Bei der ersten Option müssen Sie zwei Pfeilbilder vorbereiten - mit und ohne Hintergrundbeleuchtung. Speichern Sie sie in Dateien mit Namen wie arrON.
a # arrowA, a # arrowA: besucht {
Bildschirmsperre;
Höhe: 30px;
Breite: 100px;
Hintergrund: URL (arrOFF.gif) keine Wiederholung;
Rand: 0;
}
a # PfeilA: schweben {
Hintergrund: URL (arrON.gif) keine Wiederholung;
Rand: 0;
}
Der erste Block enthält die Abmessungen des Pfeils (Höhe: 30px; Breite: 100px;) - ersetzen Sie diese durch die Abmessungen der vorbereiteten Pfeilbilder.
Schritt 3
Die zweite Option ermöglicht es Ihnen, mit nur einer Bilddatei auszukommen. Sie müssen beide Bilder des Pfeils darin platzieren - sowohl hervorgehoben als auch inaktiv. Sie können sie nebeneinander oder übereinander platzieren. Im Beispielcode gehen wir davon aus, dass der hervorgehobene Pfeil unter dem inaktiven platziert ist und die Datei von Ihnen arr.
a # arrowA, a # arrowA: besucht {
Bildschirmsperre;
Breite: 100px;
Höhe: 30px;
Hintergrund: URL (arr.gif) keine Wiederholung;
Rand: 0;
}
a # PfeilA: schweben {
Hintergrund: URL (arr.gif) No-Repeat 31px;
Rand: 0;
}
Vergessen Sie auch hier nicht, die Größe zu ändern.
