Peta Gambar HTML

” dan terapkan properti CSS berikut:

.gambar-peta {

lebar : 700px;

margin: mobil;

}

Berikut adalah deskripsi properti CSS yang disebutkan:

• “ lebar ” properti menyetel lebar elemen div.
• “ batas ” properti menambahkan lebih banyak ruang di sekitar elemen.

Elemen gaya 'img'.

.gambar-peta img {

lebar : 100 %;

}

Lihat, koordinat area yang ditentukan dalam “ koordinat ” atribut sekarang dapat diklik:

Pada bagian selanjutnya, kita akan belajar bagaimana menautkan peta gambar ke sumber lain.

Bagaimana Cara Membuat Peta Gambar yang Ditautkan ke Halaman Lain?

Buat halaman HTML lain dengan ekstensi “ .html ” dengan mengikuti langkah-langkah yang disebutkan di bawah ini:

• Dalam kasus kami, kami memberinya nama ' laptop.html ”.
• Tambahkan elemen div dan berikan kelas ' laptop-img ”.
• Kemudian, tempatkan gambar menggunakan “ ' elemen dan kaitkan ' src ' dan ' lebar ” atribut.
• Selanjutnya, tentukan paragraf menggunakan “

  ” elemen:

< div kelas = 'laptop-img' >

< img src = '/images/laptop.jpg' lebar = '400px' >

< p >Laptop adalah komputer portabel yang dapat dipindahkan dan digunakan dalam berbagai pengaturan.< / p >

< / div >

Di CSS, tentukan properti CSS berikut ke “ laptop-img ' kelas:

.laptop-img {

lebar : 500px;

margin: mobil;

}

Keluaran

Sekarang, kami akan menautkan ' laptop.html ” halaman ke gambar “ ” di halaman pertama. Untuk melakukannya, tentukan URL halaman ke “ href ” dari elemen “ ” seperti yang ditunjukkan di bawah ini:

< daerah membentuk = 'tepat' koordinat = '310,57,590,470' href = 'laptop.html' >

Keluaran

Kami telah berhasil mempelajari apa itu peta gambar dan bagaimana peta itu dihubungkan dengan sumber lain.

Kesimpulan

HTML-nya ” elemen digunakan untuk membuat peta gambar atau gambar dengan area yang dapat diklik. Untuk menentukan area gambar yang dapat diklik, satu atau beberapa ' ” tag ditambahkan di dalam elemen “