De obicei, săgețile grafice de pe site-uri web sunt utilizate pentru a organiza navigarea. Când faceți clic pe un astfel de indicator, mergeți la o altă pagină sau la o altă secțiune a paginii curente. Uneori, unele acțiuni sunt legate de acestea - evidențierea conținutului câmpului etichetei, lansarea unui script JavaScript etc. Pentru a sublinia că această săgeată este un element activ, utilizați efectul „evidențiere”, adică schimbări de aspect la trecerea mouse-ului.
Necesar
Cunoașterea de bază a limbajelor HTML și CSS
Instrucțiuni
Pasul 1
Stabiliți ce mecanism de implementare a evidențierii săgeții este cel mai potrivit pentru dvs. Există mai multe dintre ele, două simple sunt date în etapele următoare ale acestei instrucțiuni. Amândoi folosesc pseudo-clasa CSS hover. Când cursorul mouse-ului este deasupra unui element grafic (săgeată), stilul descris în această pseudo-clasă i se aplică, iar în restul timpului acest stil nu este activ. Pentru ambele opțiuni descrise mai jos, puteți utiliza același HTML cod, dar descrieri de stil diferite. Codul săgeată din sursa paginii poate fi scris după cum urmează: Atributul id specifică identificatorul de legătură (săgeata A), prin care browserul va determina care dintre descrierile de stil ar trebui să i se aplice.
Pasul 2
Prima opțiune vă va cere să pregătiți două imagini cu săgeți - cu și fără iluminare din spate. Salvați-le în fișiere cu nume precum arrON.
o # săgeatăA, o # săgeatăA: vizitată {
display: bloc;
înălțime: 30px;
lățime: 100px;
fundal: url (arrOFF.gif) fără repetare;
chenar: 0;
}
a # arrowA: hover {
fundal: url (arrON.gif) fără repetare;
chenar: 0;
}
Primul bloc conține dimensiunile săgeții (înălțime: 30 px; lățime: 100 px;) - înlocuiți-le cu dimensiunile imaginilor săgeții pregătite.
Pasul 3
A doua opțiune vă permite să treceți cu un singur fișier imagine. Trebuie să plasați ambele imagini ale săgeții în ea - atât evidențiate, cât și inactive. Îi poți așeza unul lângă altul, poți unul peste celălalt. În exemplul de cod, vom presupune că săgeata evidențiată este plasată sub cea inactivă, iar fișierul este numit de dvs. arr.gif. Această imagine, ca și în versiunea anterioară, este utilizată ca fundal pentru link. Deoarece dimensiunile obiectului sunt indicate în descrierea stilului, întregul rest al fundalului (săgeată evidențiată) care nu se încadrează în ele nu va fi vizibil pentru surferul web. În descrierea cursorului pseudo-stil, este specificată o schimbare în poziționarea imaginii de fundal, astfel încât atunci când plasați cursorul peste link, o altă secțiune va deveni vizibilă și acum săgeata pasivă va apărea „în afara ecranului”.
o # săgeatăA, o # săgeatăA: vizitată {
display: bloc;
lățime: 100px;
înălțime: 30px;
fundal: url (arr.gif) fără repetare;
chenar: 0;
}
a # arrowA: hover {
fundal: url (arr.gif) 31px fără repetare;
chenar: 0;
}
Nu uitați să redimensionați și aici.
