Typisk bruges grafiske pile på websteder til at organisere navigation. Når du klikker på en sådan markør, går du til en anden side eller et andet afsnit på den aktuelle side. Nogle gange er nogle handlinger bundet til dem - fremhævning af indholdet i tagfeltet, lancering af et JavaScript-script osv. For at understrege, at denne pil er et aktivt element, skal du bruge "fremhævningseffekten", dvs. ændringer i udseende ved musemarkering.
Nødvendig
Grundlæggende kendskab til HTML- og CSS-sprog
Instruktioner
Trin 1
Bestem hvilken mekanisme til implementering af pilmarkeringen, der er bedst for dig. Der er flere af dem, to enkle er angivet i de efterfølgende trin i denne instruktion. De bruger begge pseudoklassen CSS. Når musemarkøren er over et grafisk element (pil), anvendes den stil, der er beskrevet i denne pseudoklasse, og resten af tiden er denne stil ikke aktiv. For begge indstillinger beskrevet nedenfor kan du bruge den samme HTML kode, men forskellige stilbeskrivelser. Pilekoden i sidekilden kan skrives som følger: Id-attributten angiver linkidentifikatoren (pilA), hvormed browseren bestemmer, hvilken af stilbeskrivelserne der skal anvendes på den.
Trin 2
Den første mulighed kræver, at du forbereder to pilebilleder - med og uden baggrundsbelysning. Gem dem i filer med navne som henholdsvis arrON.
en # pilA, en # pil A: besøgt {
display: blok;
højde: 30 px;
bredde: 100px;
baggrund: url (arrOFF.gif) ingen gentagelse;
grænse: 0;
}
a # pil A: svæver {
baggrund: url (arrON.gif) no-repeat;
grænse: 0;
}
Den første blok indeholder pilens dimensioner (højde: 30 pixel; bredde: 100 pixel) - udskift dem med dimensionerne på de forberedte pilebilleder.
Trin 3
Den anden mulighed giver dig mulighed for at komme af med kun en billedfil. Du skal placere begge billeder af pilen i den - både fremhævet og inaktiv. Du kan placere dem side om side, du kan placere hinanden over hinanden. I prøvekoden antager vi, at den fremhævede pil er placeret under den inaktive, og filen hedder arr.
en # pilA, en # pil A: besøgt {
display: blok;
bredde: 100px;
højde: 30 px;
baggrund: url (arr.gif) no-repeat;
grænse: 0;
}
a # pil A: svæver {
baggrund: url (arr.gif) no-repeat 31px;
grænse: 0;
}
Glem ikke at ændre størrelsen her også.
