Peta Imej HTML

Peta Imej Html



Selalunya, anda mungkin telah melawati tapak web di mana anda boleh mencari pautan seperti ini: “ Lawati pautan untuk mengetahui lebih lanjut ”. Akibatnya, jika anda mengklik pada ini, anda akan dibawa ke laman web lain. Dengan cara yang sama, fungsi pemetaan imej HTML membolehkan kami menambah pautan yang boleh diklik pada imej. Halaman tersebut akan mengarahkan kami ke sumber lain apabila anda mengklik pada kawasan yang ditentukan itu.

Siaran ini akan mengajar anda:

Apakah Peta Imej HTML?

Peta imej ialah gambar dengan kawasan yang boleh diklik. Untuk membuat peta imej dalam HTML, ' ” elemen digunakan. Selain itu, satu atau lebih ' teg ” ditambah dalam elemen “” untuk menentukan kawasan.





Sintaks



Sintaks untuk menentukan peta imej dalam dokumen HTML disebutkan di bawah:



< img src = 'images/img1.jpg' segala-galanya = 'komputer riba' peta guna = '#clickspace' >

< peta nama = 'ruang klik' >

< kawasan bentuk = 'betul' koordinat = '224,37,422,312' href = 'laptop.html' >

< / peta >

' 'elemen ditakrifkan dengan atribut berikut:



  • “ src ” menentukan laluan imej.
  • “ segala-galanya ” menunjukkan teks ganti apabila imej tidak dapat dimuatkan.
  • “ peta guna ” ditentukan untuk menjadikan kawasan imej boleh diklik. Untuk membuat pautan, nilainya mestilah sama dengan kelas atau id elemen ''.

' 'elemen ditambah dengan atribut berikut:

  • “ bentuk ' menentukan saiz kawasan HTML ' ” unsur.
  • “ koordinat ” atribut mentakrifkan koordinat kawasan boleh klik.
  • “ href ” atribut menetapkan URL sumber.

Bagaimana untuk Mencipta Peta Imej dalam Dokumen HTML?

Untuk membuat peta imej dalam dokumen HTML, lihat arahan yang diberikan:



  • Dalam HTML, tambahkan “
    'elemen, dan tetapkan kelas' peta imej ”.
  • Dalam div ini, tambahkan “ ” elemen untuk menambah imej yang dikaitkan dengan atribut yang dibincangkan di atas.
  • Kemudian, tambahkan HTML ' elemen ” dan berikannya “ ruang klik ” nama.
  • Perhatikan bahawa ' peta guna atribut ' diberi nama ' #ruang klik 'menunjuk ke' nama ” atribut teg “”.
  • Di dalamnya, tambahkan ' teg ” dengan atribut yang dinyatakan di atas:
< div kelas = 'peta imej' >

< img src = 'images/img1.jpg' segala-galanya = 'komputer riba' peta guna = '#clickspace' >

< peta nama = 'ruang klik' >

< kawasan bentuk = 'betul' koordinat = '224,37,422,312' href = 'laptop.html' >

< / peta >

< / div >

Mari kita beralih ke bahagian CSS untuk melaraskan saiz imej.

Gaya “
” dalam CSS

Gunakan ' .gambar-peta 'kelas untuk mengakses'

” dan gunakan sifat CSS berikut:

.gambar-peta {

lebar : 700px;

margin: kereta;

}

Berikut ialah perihalan sifat CSS yang disebutkan:

  • ' lebar ” harta menetapkan lebar elemen div.
  • ' margin ” harta menambah lebih banyak ruang di sekeliling elemen.

Gaya Elemen 'img'.

.imej-peta img {

lebar : 100 %;

}

Lihat, koordinat kawasan yang dinyatakan dalam “ koordinat ” atribut kini boleh diklik:

Dalam bahagian seterusnya, kita akan belajar cara memautkan peta imej ke sumber lain.

Bagaimana untuk Membuat Peta Imej Dipautkan ke Halaman Lain?

Buat halaman HTML lain dengan sambungan “ .html ” dengan mengikuti langkah-langkah yang dinyatakan di bawah:

  • Dalam kes kami, kami memberi nama ' komputer riba.html ”.
  • Tambah elemen div dan tetapkan ia kelas ' komputer riba-img ”.
  • Kemudian, letakkan imej menggunakan ' elemen ” dan mengaitkan “ src ” dan “ lebar ” sifat-sifat.
  • Seterusnya, nyatakan perenggan menggunakan '

    'elemen:

< div kelas = 'img komputer riba' >

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

< hlm > Komputer riba ialah komputer mudah alih yang boleh dialih dan digunakan dalam pelbagai tetapan.< / hlm >

< / div >

Dalam CSS, nyatakan sifat CSS berikut kepada “ komputer riba-img ” kelas:

.laptop-img {

lebar : 500px;

margin: kereta;

}

Pengeluaran

Sekarang, kami akan memautkan ' komputer riba.html 'halaman ke imej' ” elemen halaman pertama. Untuk berbuat demikian, nyatakan URL halaman pada “ href ” atribut elemen “” seperti yang ditunjukkan di bawah:

< kawasan bentuk = 'betul' koordinat = '310,57,590,470' href = 'laptop.html' >

Pengeluaran

Kami telah berjaya mengetahui apakah itu peta imej dan cara ia dikaitkan dengan sumber lain.

Kesimpulan

HTML ' elemen ” digunakan untuk mencipta peta imej atau imej dengan kawasan boleh klik. Untuk menentukan kawasan boleh klik imej, satu atau lebih ' teg ” ditambah dalam elemen “”. Selain itu, atribut yang dikaitkan dengan teg “ ” ialah “ bentuk ”, “ koordinat ”, dan “ href ”. Siaran ini telah menggambarkan cara membuat peta imej HTML dengan contoh.

Lain-lain

Kategori

Jawatan Popular

Menggunakan Ansible untuk Memasang dan Mengkonfigurasi Docker

Apakah itu System.Array dalam C#

Cara Membuat Avatar Saya Perempuan atau Lelaki

Bagaimana Menggunakan Komposisi dalam Java dengan Contoh?

Windows 10 UNMOUNTABLE_BOOT_VOLUME BSOD Ralat | 3 Penyelesaian

Cara menggunakan AWS CLI pada Windows

Cara Menggunakan Fungsi Putchar() dalam C

Cara Menghentikan Masa Perintah dalam Bash Tanpa Kelewatan yang Tidak Perlu

Pantau Prestasi Raspberry Pi dari Jauh Menggunakan Pandangan

Operasi Asas dengan Tensor dalam PyTorch

[SOLVED] Ralat IRQL_UNEXPECTED_VALUE pada Windows 10

Apakah Perbezaan Antara extends dan implement di Jawa

Cara Mengetahui Versi Windows 10

Bagaimana untuk Mengendalikan Fungsi ClearTimeout() JavaScript?

Medan Input Teks Dilumpuhkan Bootstrap

Bagaimana untuk Menambah Margin Mendatar dan Menegak dalam Tailwind?

Apakah Docker run -it Flag?

Bagaimana untuk mengalih keluar Kenalan Penyegerakan Gmail pada Android

Apakah Persekitaran Pementasan Git?

Cara Mengisih Elemen Tatasusunan dalam MATLAB Menggunakan sort()