Lampu latar butang di laman web biasanya diatur menggunakan dua gambar. Apabila anda mengarahkan kursor tetikus ke elemen dokumen yang sesuai (pautan atau butang), peristiwa akan dihasilkan, yang, sesuai dengan petunjuk yang ditulis dalam bahasa CSS, mendorong penyemak imbas untuk menukar satu gambar ke gambar yang lain. Apabila kursor tetikus dipindahkan dari butang, penggantian terbalik berlaku.
Perlu
Pengetahuan asas bahasa HTML dan CSS
Arahan
Langkah 1
Terdapat beberapa pilihan untuk melaksanakan mekanisme penekanan seperti itu. Untuk mana-mana dari mereka, anda boleh menggunakan kod HTML yang sama, hanya mengubah deskripsi gaya yang sesuai. Kod HTML butang mungkin kelihatan seperti ini: teks pada butang Berikut adalah pengecam elemen halaman ini (id = "btnA") yang akan dilampirkan keterangan gaya.
Langkah 2
Untuk melaksanakan salah satu pilihan, anda perlu menyediakan dua gambar, salah satunya menunjukkan butang dalam keadaan tidak aktif, dan yang kedua dengan lampu latar. Mereka akan digunakan sebagai gambar latar pautan. Arahan CSS untuk butang ini mungkin kelihatan seperti ini:
a # btnA, a # btnA: dilawati {
paparan: blok;
lebar: 50 piksel;
tinggi: 20 piksel;
latar belakang: url (btnA.gif) tidak berulang;
sempadan: 0;
}
a # btnA: arahkan {
latar belakang: url (btnA_hover.gif) tidak berulang;
sempadan: 0;
}
Di sini, pada blok pertama, dimensi gambar yang menggambarkan butang ditunjukkan (lebar: 50 piksel; tinggi: 20 piksel;). Anda perlu menggantinya dengan dimensi gambar anda. Nama fail gambar harus diubah dengan cara yang sama: btnA.
Langkah 3
Salah satu alternatif adalah meletakkan kedua gambar menjadi satu gambar. Ia boleh menjadi satu di atas yang lain, atau boleh berada di sebelah satu sama lain. Ia juga akan digunakan sebagai latar belakang pautan. Oleh kerana saiz butang ditentukan dalam keterangan gaya butang, apa pun yang tidak sesuai dengannya tidak akan kelihatan. Dalam kes ini, arahan yang terdapat dalam keterangan CSS harus, ketika mengarahkan kursor tetikus, menatal gambar latar sehingga kawasan dengan gambar butang yang disorot jatuh ke dalam bingkai. Untuk pilihan ini, kod dari langkah sebelumnya mesti diubah seperti berikut:
a # btnA, a # btnA: dilawati {
paparan: blok;
lebar: 50 piksel;
tinggi: 20px;
latar belakang: url (btnA.gif) tidak berulang;
sempadan: 0;
}
a # btnA: arahkan {
latar belakang: url (btnA.gif) 21px tanpa ulangan;
sempadan: 0;
}
Ini mengandaikan bahawa anda telah meletakkan gambar satu di atas yang lain (diserlahkan di bahagian bawah) dan disimpan ke fail bernama btnA.gif. Ketinggian butang adalah 20px, lebarnya 50px - anda perlu mengganti nilai ini dengan nilai anda sendiri.
