Za organiziranje navigacije obično se koriste grafičke strelice na web mjestima. Kada kliknete takav pokazivač, prelazite na drugu stranicu ili u drugi odjeljak trenutne stranice. Ponekad su neke radnje vezane uz njih - isticanje sadržaja polja oznake, pokretanje JavaScript skripte itd. Da biste naglasili da je ova strelica aktivni element, upotrijebite efekt "isticanja", tj. promjene u izgledu prilikom prelaska mišem.
Potrebno
Osnovno znanje HTML i CSS jezika
Upute
Korak 1
Utvrdite koji je mehanizam za primjenu isticanja strelice najbolji za vas. Postoji nekoliko njih, dvije jednostavne dane su u sljedećim koracima ove upute. Oboje koriste pseudo-klasu CSS hover. Kad je kursor miša iznad grafičkog elementa (strelice), na njega se primjenjuje stil opisan u ovoj pseudo-klasi, a ostatak vremena taj stil nije aktivan. Za obje opcije opisane u nastavku možete koristiti isti HTML koda, ali različiti opisi stilova. Kôd strelice u izvoru stranice može se napisati na sljedeći način: Atribut id navodi identifikator veze (strelica A), pomoću kojeg će preglednik odrediti koji od opisa stilova treba primijeniti na njega.
Korak 2
Prva opcija zahtijevat će da pripremite dvije slike strelice - sa i bez pozadinskog osvjetljenja. Spremite ih u datoteke s imenima kao što su arrON.
a # arrowA, # arrowA: posjećeno {
prikaz: blok;
visina: 30px;
širina: 100px;
pozadina: url (arrOFF.gif) bez ponavljanja;
obrub: 0;
}
a # arrowA: hover {
pozadina: url (arrON.gif) bez ponavljanja;
obrub: 0;
}
Prvi blok sadrži dimenzije strelice (visina: 30px; širina: 100px;) - zamijenite ih dimenzijama pripremljenih slika strelice.
3. korak
Druga opcija omogućuje vam snalaženje samo s jednom slikovnom datotekom. U nju morate smjestiti obje slike strelice - i istaknute i neaktivne. Možete ih postaviti jedno uz drugo, možete jedno iznad drugog. U uzorku koda pretpostavit ćemo da je označena strelica postavljena ispod neaktivne, a datoteku ste imenovali arr.gif. Ova se slika, kao i u prethodnoj verziji, koristi kao pozadina veze. Budući da su dimenzije predmeta naznačene u opisu stila, web surferu neće biti vidljiv cijeli ostatak pozadine (istaknuta strelica) koji se u njih ne uklapa. U opisu lebdenja u pseudo stilu naveden je pomak u pozicioniranju pozadinske slike, pa kad pokazivač zadržite iznad veze, drugi će odjeljak postati vidljiv i sada će se pasivna strelica pojaviti "izvan zaslona".
a # arrowA, # arrowA: posjećeno {
prikaz: blok;
širina: 100px;
visina: 30px;
pozadina: url (arr.gif) bez ponavljanja;
obrub: 0;
}
a # arrowA: hover {
pozadina: url (arr.gif) bez ponavljanja 31px;
obrub: 0;
}
Ne zaboravite i ovdje promijeniti veličinu.
