Ndriçimi i butonave në faqet e internetit zakonisht organizohet duke përdorur dy imazhe. Kur vendosni kursorin e miut mbi elementin përkatës të dokumentit (lidhja ose butoni), gjenerohet një ngjarje, e cila, në përputhje me udhëzimet e shkruara në gjuhën CSS, e shtyn shfletuesin të ndryshojë një imazh në tjetrin. Kur kursori i miut largohet nga butoni, ndodh zëvendësimi i kundërt.
E nevojshme
Njohuri themelore të gjuhëve HTML dhe CSS
Udhëzimet
Hapi 1
Ekzistojnë disa opsione për zbatimin e një mekanizmi të tillë të theksimit. Për secilën prej tyre, ju mund të përdorni të njëjtin kod HTML, duke ndryshuar vetëm përshkrimin përkatës të stilit. Kodi HTML i butonit mund të duket kështu: teksti në buton Këtu është identifikuesi i këtij elementi të faqes (id = "btnA") të cilit do t'i bashkëngjitet përshkrimi i stilit.
Hapi 2
Për të zbatuar një nga opsionet, duhet të përgatitni dy fotografi, njëra prej të cilave tregon butonin në një gjendje joaktive, dhe tjetra me një dritë të pasme. Ato do të përdoren si imazhi i sfondit të lidhjes. Udhëzimet CSS për këtë buton mund të duken kështu:
një # btnA, një # btnA: vizituar {
ekran: bllok;
gjerësia: 50px;
lartësia: 20px;
sfondi: url (btnA.gif) pa përsëritje;
kufiri: 0;
}
a # btnA: rri pezull {
sfondi: url (btnA_hover.gif) pa përsëritje;
kufiri: 0;
}
Këtu, në bllokun e parë, tregohen dimensionet e imazhit që përshkruan butonin (gjerësia: 50px; lartësia: 20px;). Ju duhet t'i zëvendësoni ato me dimensionet e fotos tuaj. Emrat e skedarëve të imazheve duhet të ndryshohen në të njëjtën mënyrë: btnA.
Hapi 3
Një alternativë është t'i vendosni të dy imazhet në një fotografi. Mund të jetë njëra mbi tjetrën, ose mund të jetë pranë njëra-tjetrës. Do të përdoret gjithashtu si sfond për lidhjen. Meqenëse madhësitë e butonave janë specifikuar në përshkrimin e stilit të butonit, gjithçka që nuk përshtatet në to nuk do të jetë e dukshme. Në këtë rast, udhëzimet e vendosura në përshkrimin e CSS duhet, kur rri pezull në kursorin e miut, të lëvizin imazhin e sfondit në mënyrë që zona me imazhin e butonit të theksuar të bjerë në kornizë. Për këtë opsion, kodi nga hapi i mëparshëm duhet të ndryshohet si më poshtë:
një # btnA, një # btnA: vizituar {
ekran: bllok;
gjerësia: 50px;
lartësia: 20px;
sfondi: url (btnA.gif) pa përsëritje;
kufiri: 0;
}
a # btnA: rri pezull {
sfondi: url (btnA.gif) pa përsëritje 21px;
kufiri: 0;
}
Kjo supozon që ju i keni vendosur imazhet njëra mbi tjetrën (të theksuara në pjesën e poshtme) dhe se i keni ruajtur në një skedar të quajtur btnA.gif. Lartësia e butonave është 20px, gjerësia është 50px - duhet t'i zëvendësoni këto vlera me vlerat tuaja.
