Meestal worden grafische pijlen op websites gebruikt om de navigatie te organiseren. Wanneer u op zo'n aanwijzer klikt, gaat u naar een andere pagina of naar een ander gedeelte van de huidige pagina. Soms zijn er acties aan verbonden - het markeren van de inhoud van het tagveld, het starten van een JavaScript-script, enz. Om te benadrukken dat deze pijl een actief element is, gebruikt u het "highlight"-effect, d.w.z. veranderingen in uiterlijk bij mouseover.
Noodzakelijk
Basiskennis van HTML- en CSS-talen
instructies:
Stap 1
Bepaal welk mechanisme voor het implementeren van de pijlmarkering het beste voor u is. Er zijn er verschillende, twee eenvoudige worden gegeven in de volgende stappen van deze instructie. Ze gebruiken allebei de CSS hover pseudo-klasse. Wanneer de muiscursor zich boven een grafisch element (pijl) bevindt, wordt de stijl beschreven in deze pseudo-klasse erop toegepast, en de rest van de tijd is deze stijl niet actief. Voor beide hieronder beschreven opties kunt u dezelfde HTML gebruiken code, maar verschillende stijlbeschrijvingen. De pijlcode in de paginabron kan als volgt worden geschreven: Het id-attribuut specificeert de link-identifier (arrowA), waarmee de browser bepaalt welke stijlbeschrijvingen erop moeten worden toegepast.
Stap 2
Voor de eerste optie moet u twee pijlafbeeldingen voorbereiden - met en zonder achtergrondverlichting. Sla ze op in bestanden met namen als respectievelijk arrON.
een # arrowA, een # arrowA: bezocht {
weergave: blok;
hoogte: 30px;
breedte: 100px;
achtergrond: url (arrOFF.gif) niet herhalen;
grens: 0;
}
een # pijlA: zweef {
achtergrond: url (arrON.gif) niet herhalen;
grens: 0;
}
Het eerste blok bevat de afmetingen van de pijl (hoogte: 30px; breedte: 100px;) - vervang ze door de afmetingen van de voorbereide pijlafbeeldingen.
Stap 3
Met de tweede optie kun je rondkomen met slechts één afbeeldingsbestand. U moet beide afbeeldingen van de pijl erin plaatsen - zowel gemarkeerd als inactief. Je kunt ze naast elkaar plaatsen, je kunt de een boven de ander. In de voorbeeldcode gaan we ervan uit dat de gemarkeerde pijl onder de inactieve is geplaatst en dat het bestand door u arr.
een # arrowA, een # arrowA: bezocht {
weergave: blok;
breedte: 100px;
hoogte: 30px;
achtergrond: url (arr.gif) niet herhalen;
grens: 0;
}
een # pijlA: zweef {
achtergrond: url (arr.gif) no-repeat 31px;
grens: 0;
}
Vergeet ook hier niet het formaat te wijzigen.
