Vanligvis brukes grafiske piler på nettsteder til å organisere navigering. Når du klikker på en slik peker, går du til en annen side eller til en annen del av den nåværende siden. Noen ganger er noen handlinger knyttet til dem - fremhever innholdet i taggfeltet, lanserer et JavaScript-skript osv. For å understreke at denne pilen er et aktivt element, bruk "highlight" -effekten, dvs. endringer i utseende ved musemarkering.
Nødvendig
Grunnleggende kunnskaper om HTML- og CSS-språk
Bruksanvisning
Trinn 1
Bestem hvilken mekanisme for implementering av pilmarkeringen som er best for deg. Det er flere av dem, to enkle er gitt i de påfølgende trinnene i denne instruksjonen. De bruker begge pseudoklassen CSS. Når musemarkøren er over et grafisk element (pil), brukes stilen som er beskrevet i denne pseudoklassen, og resten av tiden er denne stilen ikke aktiv. For begge alternativene beskrevet nedenfor kan du bruke samme HTML kode, men forskjellige stilbeskrivelser. Pilkoden i sidekilden kan skrives som følger: ID-attributtet angir koblingsidentifikatoren (pilA), som nettleseren vil bestemme hvilken av stilbeskrivelsene som skal brukes på den.
Steg 2
Det første alternativet vil kreve at du forbereder to pilbilder - med og uten bakgrunnsbelyst. Lagre dem i filer med navn som arrON.
en # pilA, en # pil A: besøkt {
display: blokk;
høyde: 30px;
bredde: 100px;
bakgrunn: url (arrOFF.gif) no-repeat;
grense: 0;
}
a # pilA: sveve {
bakgrunn: url (arrON.gif) no-repeat;
grense: 0;
}
Den første blokken inneholder pilens dimensjoner (høyde: 30px; bredde: 100px;) - erstatt dem med dimensjonene til de forberedte pilbildene.
Trinn 3
Det andre alternativet lar deg klare deg med bare en bildefil. Du må plassere begge bildene av pilen i den - både uthevet og inaktiv. Du kan plassere dem side om side, du kan plassere hverandre. I eksempelkoden vil vi anta at den markerte pilen er plassert under den inaktive, og filen heter arr.
en # pilA, en # pil A: besøkt {
display: blokk;
bredde: 100px;
høyde: 30px;
bakgrunn: url (arr.gif) no-repeat;
grense: 0;
}
a # pilA: sveve {
bakgrunn: url (arr.gif) no-repeat 31px;
grense: 0;
}
Ikke glem å endre størrelse her også.
