Lampu latar tombol di halaman web biasanya diatur menggunakan dua gambar. Saat Anda mengarahkan kursor mouse ke elemen dokumen yang sesuai (tautan atau tombol), sebuah peristiwa dibuat, yang, sesuai dengan instruksi yang ditulis dalam bahasa CSS, meminta browser untuk mengubah satu gambar ke gambar lainnya. Ketika kursor mouse dipindahkan dari tombol, penggantian terbalik terjadi.
Diperlukan
Pengetahuan dasar tentang bahasa HTML dan CSS
instruksi
Langkah 1
Ada beberapa opsi untuk menerapkan mekanisme penyorotan seperti itu. Untuk salah satu dari mereka, Anda dapat menggunakan kode HTML yang sama, hanya mengubah deskripsi gaya yang sesuai. Kode HTML tombol mungkin terlihat seperti ini: teks pada tombol Berikut adalah pengidentifikasi elemen halaman ini (id = "btnA") yang akan dilampirkan deskripsi gaya.
Langkah 2
Untuk menerapkan salah satu opsi, Anda perlu menyiapkan dua gambar, salah satunya menunjukkan tombol dalam keadaan tidak aktif, dan yang kedua dengan lampu latar. Mereka akan digunakan sebagai gambar latar belakang tautan. Instruksi CSS untuk tombol ini mungkin terlihat seperti ini:
a # btnA, a # btnA: dikunjungi {
tampilan: blok;
lebar: 50 piksel;
tinggi: 20 piksel;
latar belakang: url (btnA.gif) no-repeat;
batas: 0;
}
a # btnA: arahkan {
latar belakang: url (btnA_hover.gif) no-repeat;
batas: 0;
}
Di sini, di blok pertama, dimensi gambar yang menggambarkan tombol ditunjukkan (lebar: 50px; tinggi: 20px;). Anda perlu menggantinya dengan dimensi gambar Anda. Nama file gambar harus diubah dengan cara yang sama: btnA.
Langkah 3
Salah satu alternatifnya adalah dengan menempatkan kedua gambar tersebut menjadi satu gambar. Bisa satu di atas yang lain, atau bisa bersebelahan. Ini juga akan digunakan sebagai latar belakang untuk tautan. Karena ukuran tombol ditentukan dalam deskripsi gaya tombol, apa pun yang tidak sesuai dengannya tidak akan terlihat. Dalam hal ini, instruksi yang ditempatkan dalam deskripsi CSS harus, saat mengarahkan kursor mouse, menggulir gambar latar belakang sehingga area dengan gambar tombol yang disorot jatuh ke dalam bingkai. Untuk opsi ini, kode dari langkah sebelumnya harus diubah sebagai berikut:
a # btnA, a # btnA: dikunjungi {
tampilan: blok;
lebar: 50 piksel;
tinggi: 20 piksel;
latar belakang: url (btnA.gif) no-repeat;
batas: 0;
}
a # btnA: arahkan {
latar belakang: url (btnA.gif) no-repeat 21px;
batas: 0;
}
Ini mengasumsikan bahwa Anda telah menempatkan gambar satu di atas yang lain (disorot di bagian bawah) dan disimpan ke file bernama btnA.gif. Ketinggian tombol adalah 20px, lebarnya adalah 50px - Anda harus mengganti nilai-nilai ini dengan nilai Anda sendiri.
