Iluminarea din spate a butoanelor din paginile web este de obicei organizată folosind două imagini. Când plasați cursorul mouse-ului peste elementul corespunzător al documentului (link sau buton), se generează un eveniment care, în conformitate cu instrucțiunile scrise în limba CSS, solicită browserului să schimbe o imagine cu alta. Când cursorul mouse-ului este îndepărtat de buton, are loc înlocuirea inversă.
Necesar
Cunoașterea de bază a limbajelor HTML și CSS
Instrucțiuni
Pasul 1
Există mai multe opțiuni pentru implementarea unui astfel de mecanism de evidențiere. Pentru oricare dintre ele, puteți utiliza același cod HTML, modificând doar descrierea stilului corespunzătoare. Codul HTML al butonului poate arăta astfel: text pe buton Aici este identificatorul acestui element de pagină (id = "btnA") la care va fi atașată descrierea stilului.
Pasul 2
Pentru a implementa una dintre opțiuni, trebuie să pregătiți două imagini, dintre care una afișează butonul într-o stare inactivă, iar a doua cu lumină de fundal. Acestea vor fi folosite ca imagine de fundal a linkului. Instrucțiunile CSS pentru acest buton ar putea arăta astfel:
a # btnA, a # btnA: vizitat {
display: bloc;
lățime: 50px;
înălțime: 20px;
fundal: url (btnA.gif) fără repetare;
chenar: 0;
}
a # btnA: hover {
fundal: url (btnA_hover.gif) fără repetare;
chenar: 0;
}
Aici, în primul bloc, sunt indicate dimensiunile imaginii care descrie butonul (lățime: 50px; înălțime: 20px;). Trebuie să le înlocuiți cu dimensiunile imaginii. Numele fișierelor imagine trebuie schimbate în același mod: btnA.
Pasul 3
O alternativă este de a pune ambele imagini într-o singură imagine. Poate fi unul deasupra celuilalt sau poate fi unul lângă celălalt. De asemenea, va fi folosit ca fundal pentru link. Deoarece dimensiunile butoanelor sunt specificate în descrierea stilului butonului, tot ceea ce nu se încadrează în ele nu va fi vizibil. În acest caz, instrucțiunile plasate în descrierea CSS ar trebui, atunci când deplasați cursorul mouse-ului, să deruleze imaginea de fundal astfel încât zona cu imaginea butonului evidențiat să cadă în cadru. Pentru această opțiune, codul de la pasul anterior trebuie modificat după cum urmează:
a # btnA, a # btnA: vizitat {
display: bloc;
lățime: 50px;
înălțime: 20px;
fundal: url (btnA.gif) fără repetare;
chenar: 0;
}
a # btnA: hover {
fundal: url (btnA.gif) 21px fără repetare;
chenar: 0;
}
Aceasta presupune că ați plasat imaginile una peste cealaltă (evidențiate în partea de jos) și le-ați salvat într-un fișier numit btnA.gif. Înălțimea butoanelor este de 20 px, lățimea de 50 px - trebuie să înlocuiți aceste valori cu ale dvs.
