Cara Membuat Peta Gambar Tanpa Editor Peta Gambar

Artikel ini menjelaskan cara membuat Peta Gambar menggunakan tag HTML alih-alih editor peta gambar. Sebagian besar editor gambar akan menunjukkan koordinat mouse Anda saat Anda mengarahkan gambar, yang merupakan semua data yang Anda perlukan untuk memulai peta gambar.

Membuat Peta Gambar

Untuk membuat peta gambar, pertama-tama pilih gambar yang akan dijadikan sebagai dasar peta. Gambar harus "ukuran normal"—yaitu, Anda tidak boleh menggunakan gambar yang terlalu besar sehingga browser akan menskalakannya.

Saat Anda menyisipkan gambar, Anda akan menambahkan atribut tambahan yang mengidentifikasi koordinat peta:

Saat Anda membuat peta gambar, Anda membuat area yang dapat diklik pada gambar, sehingga koordinat peta harus sejajar dengan tinggi dan lebar gambar yang Anda pilih. Peta mendukung tiga jenis bentuk yang berbeda:

• rect—bentuk persegi panjang atau empat sisi
• poli—sebuah poligon atau sosok bersisi banyak
• lingkaran—sebuah lingkaran

Untuk membuat area, Anda harus mengisolasi koordinat spesifik yang ingin Anda petakan. Peta dapat terdiri dari satu atau lebih area yang ditentukan pada gambar yang, ketika diklik, membuka hyperlink baru.

Untuk sebuah empat persegi panjang, Anda hanya memetakan sudut kiri atas dan kanan bawah. Semua koordinat terdaftar sebagai x, y (atas, atas). Jadi, untuk sudut kiri atas 0,0 dan sudut kanan bawah 10,15 Anda akan mengetik 0,0,10,15. Anda kemudian memasukkannya ke dalam peta:

Untuk sebuah poligon, Anda memetakan masing-masing x, y berkoordinasi secara terpisah. Browser Web secara otomatis menghubungkan set koordinat terakhir dengan yang pertama; apa pun di dalam koordinat ini adalah bagian dari peta.

Lingkaran bentuk hanya membutuhkan dua koordinat, seperti persegi panjang, tetapi untuk koordinat kedua, Anda menentukan jari-jari atau jarak dari pusat lingkaran. Jadi, untuk lingkaran dengan pusat di 122.122 dan jari-jari 5 Anda akan menulis 122.122,5:

Semua area dan bentuk dapat dimasukkan dalam tag peta yang sama:

Pertimbangan

Peta gambar jauh lebih umum di era Web 1.0 tahun 1990-an hingga awal 2000-an—peta gambar sering menjadi dasar navigasi situs web. Seorang desainer akan membuat semacam gambar untuk menunjukkan item menu, kemudian mengatur peta.

Pendekatan modern mendorong desain responsif dan menggunakan lembar gaya berjenjang untuk mengontrol penempatan gambar dan hyperlink pada halaman.

Meskipun tag peta masih didukung dalam standar HTML, penggunaan perangkat seluler dengan faktor bentuk kecil dapat menyebabkan masalah kinerja yang tidak terduga dengan peta gambar. Selain itu, masalah bandwidth atau gambar yang rusak memperdebatkan nilai peta gambar.

Jadi, jangan ragu untuk terus menggunakan teknologi yang stabil dan dipahami dengan baik ini—dengan mengetahui bahwa ada alternatif yang lebih efisien saat ini dalam mode dengan desainer Web.