Biasanya, panah grafis di situs web digunakan untuk mengatur navigasi. Ketika Anda mengklik penunjuk seperti itu, Anda pergi ke halaman lain atau ke bagian lain dari halaman saat ini. Terkadang beberapa tindakan terkait dengannya - menyorot konten bidang tag, meluncurkan skrip JavaScript, dll. Untuk menekankan bahwa panah ini adalah elemen aktif, gunakan efek "sorot", mis. perubahan tampilan pada mouseover.
Diperlukan
Pengetahuan dasar tentang bahasa HTML dan CSS
instruksi
Langkah 1
Tentukan mekanisme untuk menerapkan penyorotan panah yang terbaik untuk Anda. Ada beberapa di antaranya, dua yang sederhana diberikan pada langkah selanjutnya dari instruksi ini. Mereka berdua menggunakan pseudo-class hover CSS. Saat kursor mouse berada di atas elemen grafik (panah), gaya yang dijelaskan dalam kelas semu ini diterapkan padanya, dan gaya ini tidak aktif. Untuk kedua opsi yang dijelaskan di bawah ini, Anda dapat menggunakan HTML yang sama kode, tetapi deskripsi gaya yang berbeda. Kode panah di sumber halaman dapat ditulis sebagai berikut: Atribut id menentukan pengenal tautan (panahA), yang dengannya browser akan menentukan deskripsi gaya mana yang harus diterapkan padanya.
Langkah 2
Opsi pertama mengharuskan Anda menyiapkan dua gambar panah - dengan dan tanpa lampu latar. Simpan ke file dengan nama masing-masing seperti arrON.
a # arrowA, a # arrowA: mengunjungi {
tampilan: blok;
tinggi: 30 piksel;
lebar: 100 piksel;
latar belakang: url (arrOFF.gif) no-repeat;
batas: 0;
}
a # panahA: arahkan {
latar belakang: url (arrON.gif) no-repeat;
batas: 0;
}
Blok pertama berisi dimensi panah (tinggi: 30px; lebar: 100px;) - ganti dengan dimensi gambar panah yang disiapkan.
Langkah 3
Opsi kedua memungkinkan Anda bertahan hanya dengan satu file gambar. Anda harus menempatkan kedua gambar panah di dalamnya - keduanya disorot dan tidak aktif. Anda dapat menempatkan mereka berdampingan, Anda dapat satu di atas yang lain. Dalam kode contoh, kami akan menganggap bahwa panah yang disorot ditempatkan di bawah panah yang tidak aktif, dan file tersebut diberi nama arr.
a # arrowA, a # arrowA: mengunjungi {
tampilan: blok;
lebar: 100 piksel;
tinggi: 30 piksel;
latar belakang: url (arr.gif) no-repeat;
batas: 0;
}
a # panahA: arahkan {
background: url (arr.gif) no-repeat 31px;
batas: 0;
}
Jangan lupa untuk mengubah ukuran di sini juga.
