Za organiziranje navigacije se običajno uporabljajo grafične puščice na spletnih mestih. Ko kliknete tak kazalec, se pomaknete na drugo stran ali v drug odsek trenutne strani. Včasih so z njimi vezana nekatera dejanja - poudarjanje vsebine polja oznake, zagon skripta JavaScript itd. Če želite poudariti, da je ta puščica aktivni element, uporabite učinek "poudarjanja", tj. spremembe videza ob prehodu miške.
Potrebno
Osnovno znanje jezikov HTML in CSS
Navodila
Korak 1
Ugotovite, kateri mehanizem za izvajanje poudarjanja puščice je najboljši za vas. Obstaja jih več, dva preprosta sta podana v nadaljnjih korakih tega navodila. Oba uporabljata psevdorazred CSS hover. Ko je miškin kazalec nad grafičnim elementom (puščico), se zanj uporabi slog, opisan v tem psevdorazredu, preostali čas pa ta slog ni aktiven. Za obe možnosti, opisane spodaj, lahko uporabite isti HTML koda, vendar različni opisi slogov. Kodo puščice v izvoru strani lahko zapišemo na naslednji način: Atribut id določa identifikator povezave (arrowA), s pomočjo katerega bo brskalnik določil, kateri od opisov slogov naj bo zanj uporabljen.
2. korak
Za prvo možnost boste morali pripraviti dve sliki puščice - z osvetlitvijo in brez nje. Shranite jih v datoteke z imeni, kot sta arrON.
a # arrowA, # arrowA: obiskan {
zaslon: blok;
višina: 30px;
širina: 100px;
ozadje: url (arrOFF.gif) brez ponovitve;
meja: 0;
}
a # arrowA: hover {
ozadje: url (arrON.gif) brez ponovitve;
meja: 0;
}
Prvi blok vsebuje dimenzije puščice (višina: 30px; širina: 100px;) - zamenjajte jih z dimenzijami pripravljenih slik puščic.
3. korak
Druga možnost vam omogoča, da se snamete samo z eno slikovno datoteko. Vanj morate postaviti obe sliki puščice - obe poudarjeni in neaktivni. Lahko jih postavite drug ob drugega, lahko enega nad drugega. V vzorčni kodi bomo domnevali, da je označena puščica postavljena pod neaktivno, datoteko pa ste poimenovali arr.gif. Ta slika se, tako kot v prejšnji različici, uporablja kot ozadje za povezavo. Ker so dimenzije predmeta navedene v opisu sloga, spletni surfer ne bo videl celotnega preostalega ozadja (označena puščica), ki ne ustreza vanje. V opisu lebdenja v psevdo-slogu je naveden premik pri pozicioniranju slike za ozadje, tako da ko miškin kazalec premaknete nad povezavo, bo viden še en odsek in pasivna puščica se bo prikazala "zunaj zaslona".
a # arrowA, # arrowA: obiskan {
zaslon: blok;
širina: 100px;
višina: 30px;
ozadje: url (arr.gif) brez ponovitve;
meja: 0;
}
a # arrowA: hover {
ozadje: url (arr.gif) brez ponovitve 31px;
meja: 0;
}
Ne pozabite tudi tukaj spremeniti velikosti.
