Bolehkah CSS Digunakan untuk Menggayakan Kesan Tetikus pada Peta Imej?

Bolehkah CSS Digunakan untuk Menggayakan Kesan Tetikus pada Peta Imej?

Membuat halaman web dengan imej yang mengandungi pautan boleh dicapai menggunakan peta imej. Walau bagaimanapun, menambah sentuhan interaktiviti dengan menggayakan bentuk kawasan pada tetikus boleh meningkatkan pengalaman pengguna. Adakah ini boleh dilakukan menggunakan CSS?

Mari kita pertimbangkan kod berikut:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

Walaupun cubaan, kod ini gagal menggayakan bentuk kawasan pada tetikus.

Penyelesaian CSS Sahaja:

Daripada menggunakan pendekatan peta imej, kaedah alternatif menggunakan kelas pseudo :hover CSS tersedia. Berikut ialah contoh:

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

Penjelasan:

• Imej diletakkan di lapisan bawah.
• Dua div elemen diletakkan secara mutlak di atas imej dengan kelegapan 0.
• Apabila tetikus melayang di atas elemen div ini, kelegapan meningkat kepada 0.2, mendedahkan kandungan di belakangnya.

Kaedah ini menyediakan cara yang mudah dan elegan untuk menambah kesan alih tetikus pada kawasan tertentu imej menggunakan CSS.

Atas ialah kandungan terperinci Bolehkah CSS Digunakan untuk Menggayakan Kesan Tetikus pada Peta Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!