Za organiziranje navigacije obično se koriste grafičke strelice na web lokacijama. 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 naglasite da je ova strelica aktivni element, upotrijebite efekt "isticanja", tj. promjene u izgledu prilikom prelaska mišem.
Potrebno
Osnovno znanje HTML i CSS jezika
Instrukcije
Korak 1
Utvrdite koji je mehanizam za primenu isticanja strelice najbolji za vas. Postoji nekoliko njih, dva jednostavna data su u narednim koracima ovog uputstva. Oboje koriste pseudo-klasu CSS hover. Kada je kursor miša iznad grafičkog elementa (strelice), na njega se primjenjuje stil opisan u ovoj pseudo-klasi, a ostatak vremena ovaj stil nije aktivan. Za obje opcije opisane u nastavku možete koristiti isti HTML kod, 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 pretraživač odrediti koji od opisa stilova treba primijeniti na njega.
Korak 2
Prva opcija zahtijeva da pripremite dvije slike strelice - sa i bez pozadinskog osvjetljenja. Spremite ih u datoteke s imenima kao što su arrON.
a # strelicaA, # strelicaA: posjećeno {
prikaz: blok;
visina: 30px;
širina: 100px;
pozadina: url (arrOFF.gif) bez ponavljanja;
granica: 0;
}
a # arrowA: hover {
pozadina: url (arrON.gif) bez ponavljanja;
granica: 0;
}
Prvi blok sadrži dimenzije strelice (visina: 30px; širina: 100px;) - zamijenite ih dimenzijama pripremljenih slika strelice.
Korak 3
Druga opcija vam omogućava da se snađete sa samo jednom slikovnom datotekom. U nju trebate smjestiti obje slike strelice - i istaknute i neaktivne. Možete ih postaviti jednu do druge, možete jednu iznad druge. U uzorku koda pretpostavit ćemo da je označena strelica postavljena ispod neaktivne, a vi datoteku imenujete arr.gif. Ova slika, kao i u prethodnoj verziji, koristi se 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 držanja pokazivača u pseudo stilu naveden je pomak u pozicioniranju slike u pozadini, pa kad pokazivač zadržite iznad veze, drugi odjeljak će postati vidljiv i sada će se pasivna strelica pojaviti "izvan ekrana".
a # strelicaA, # strelicaA: posjećeno {
prikaz: blok;
širina: 100px;
visina: 30px;
pozadina: url (arr.gif) bez ponavljanja;
granica: 0;
}
a # arrowA: hover {
pozadina: url (arr.gif) bez ponavljanja 31 piksela;
granica: 0;
}
Ne zaboravite i ovdje promijeniti veličinu.
