Tīmekļa lapu pogu apgaismojums parasti tiek organizēts, izmantojot divus attēlus. Pārvietojot peles kursoru virs attiecīgā dokumenta elementa (saites vai pogas), tiek ģenerēts notikums, kas saskaņā ar CSS valodā rakstītajām instrukcijām liek pārlūkam mainīt vienu attēlu uz citu. Kad peles kursors tiek pārvietots prom no pogas, notiek nomainīšana pretējā virzienā.
Nepieciešams
HTML un CSS valodu pamatzināšanas
Instrukcijas
1. solis
Šāda izcelšanas mehānisma ieviešanai ir vairākas iespējas. Jebkuram no tiem varat izmantot to pašu HTML kodu, mainot tikai atbilstošo stila aprakstu. Pogas HTML kods var izskatīties šādi: pogas teksts Šeit ir šī lapas elementa identifikators (id = "btnA"), kuram tiks pievienots stila apraksts.
2. solis
Lai ieviestu vienu no iespējām, jums jāsagatavo divi attēli, no kuriem viens parāda pogu neaktīvā stāvoklī, bet otrais - ar apgaismojumu. Tie tiks izmantoti kā saites fona attēls. Šīs pogas CSS norādījumi varētu izskatīties šādi:
a # btnA, a # btnA: apmeklēja {
displejs: bloks;
platums: 50px;
augstums: 20px;
fons: URL (btnA.gif) neatkārtot;
apmale: 0;
}
a # btnA: virziet kursoru {
fons: url (btnA_hover.gif) bez atkārtojuma;
apmale: 0;
}
Šeit pirmajā blokā ir norādīti attēla izmēri, kas attēlo pogu (platums: 50 pikseļi; augstums: 20 pikseļi;). Jums tie jāaizstāj ar attēla izmēriem. Attēlu failu nosaukumi ir jāmaina tāpat: btnA.
3. solis
Viena no alternatīvām ir abu attēlu ievietošana vienā attēlā. Tas var būt viens virs otra, vai arī viens otram blakus. Tas tiks izmantots arī kā saites fons. Tā kā pogu izmēri ir norādīti pogas stila aprakstā, viss, kas tajos neiederas, nebūs redzams. Šajā gadījumā CSS aprakstā ievietotajām instrukcijām, virzot peles kursoru, vajadzētu ritināt fona attēlu tā, lai laukums ar iezīmētās pogas attēlu iekristu rāmī. Lai izmantotu šo opciju, iepriekšējās darbības kods ir jāmaina šādi:
a # btnA, a # btnA: apmeklēja {
displejs: bloks;
platums: 50px;
augstums: 20px;
fons: URL (btnA.gif) bez atkārtojuma;
apmale: 0;
}
a # btnA: virziet kursoru {
fons: URL (btnA.gif) bez atkārtojuma 21 pikseļi;
apmale: 0;
}
Tas pieņem, ka esat ievietojis attēlus vienu virs otra (izcelts apakšā) un saglabājis failā ar nosaukumu btnA.gif. Pogu augstums ir 20 pikseļi, platums 50 pikseļi - jums ir jāaizstāj šīs vērtības ar savām.
