Penggunaan fungsi MAPIMAGE pada PHP

Image Map pada HTML bisa membuat kita dapat membuat area yang dapat di klik di gambar.

Section Artikel

• 1 Image Map[Peta Gambar]
• 2 Cara Kerja Image Map
• 3 Foto
• 4 Cara Membuat Image Map
• 5 Area
  • 5.1 Bentuk
    • 5.1.1 Bentuk = “rect”
    • 5.1.2 Bentuk = “circle”
    • 5.1.3 Bentuk = “poli”
• 6 Image Map dan JavaScript
• 7 Chapter Summary
• 8 Tag Image HTML

Image Map[Peta Gambar]

Tag HTML mendefinisikan peta gambar. Peta gambar adalah gambar dengan area yang dapat diklik. Area ditentukan dengan satu atau lebih tag .

Coba klik komputer, ponsel, atau secangkir kopi pada gambar di bawah ini:

Contoh
Berikut adalah kode sumber HTML untuk peta gambar di atas:

Image Maps
Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:




  
  
  

Cara Kerja Image Map

Cara kerja image map bisa dilakukan dengan melakukan tindakan yang berbeda, tergantung di gambar bagian mana yang ingin kita klik.

Untuk membuat peta gambar, kita memerlukan gambar dan beberapa kode HTML yang menjelaskan area yang dapat diklik.

Foto

Gambar disisipkan menggunakan tag

Nilai usemap dimulai dengan hashtag # diikuti dengan nama image map dan digunakan untuk membuat hubungan antara image dan image map.
Tip: Kita bisa bebas menggunakan gambar apapun pada image map!

Cara Membuat Image Map

Pertama, buat kode menggunakan

Koordinat 270.350 terletak 270 piksel dari margin kiri dan 350 piksel dari atas:

Sekarang kita sudah memiliki cukup data untuk membuat area persegi panjang yang dapat diklik:

Image Maps
Click on the computer, to go to a new page and read more about the topic:




  

Ini adalah area yang dapat diklik dan akan mengarahkan pengguna ke halaman “computer.jpg”:

Bentuk = “circle”

Untuk menambahkan area lingkaran, pertama cari koordinat dari pusat lingkaran :

337,300

Kemudian tentukan radius lingkaran:

44 piksel

Sekarang kita memiliki cukup data untuk membuat area melingkar yang dapat diklik:

Contoh

Image Maps
Click on the cup of coffee to go to a new page and read more about the topic:




  

Ini adalah area yang dapat diklik dan akan mengarahkan pengguna ke halaman “coffee.jpg”:

Bentuk = “poli”

Shape = "poly" berisi beberapa titik koordinat, yang membuat bentuk garis lurus [poligon]. Dapat digunakan untuk membuat bentuk apa pun.

Seperti mungkin bentuk croissant!

Bagaimana caranya agar croissant pada gambar di bawah ini menjadi link yang bisa diklik?

Kita harus mencari koordinat x dan y untuk semua tepi croissant:

Kita harus mencari koordinat x dan y untuk semua tepi croissant. Koordinatnya berpasangan, satu untuk sumbu x dan satu untuk sumbu y:

Contoh

Image Maps
Click on the croissant to go to a new page and read more about the topic:




  

Ini adalah area yang dapat diklik dan akan mengarahkan pengguna ke halaman “1.jpg”:

Image Map dan JavaScript

Area yang dapat diklik juga dapat mentrigger fungsi JavaScript.

Tambahkan klik ke elemen untuk menjalankan fungsi JavaScript:

Contoh
Di sini, kita menggunakan atribut title untuk menjalankan fungsi JavaScript ketika area tersebut diklik:

Image Maps

Click on the cup of coffee to execute a JavaScript function:




  



function myFunction[] {
  alert["You clicked the coffee cup!"];
}

Chapter Summary

• Gunakan elemen HTML untuk menggunakan image map
• Gunakan elemen HTMl untuk membuat area pada image map bisa di klik
• Gunakan atribut usemap HTML dari elemen untuk mengarah ke peta gambar

Tag Image HTML