Yang Perlu Diketahui
• Gunakan gambar berukuran normal yang tidak akan diubah skalanya oleh browser. Anda juga memerlukan editor gambar dan editor HTML atau teks.
• Saat menyisipkan gambar, tambahkan atribut tambahan untuk mengidentifikasi koordinat peta.
• Misalnya:
Artikel ini menjelaskan cara membuat Peta Gambar menggunakan tag HTML alih-alih editor peta gambar. Sebagian besar editor gambar akan menunjukkan koordinat mouse 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 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-a persegi panjang atau gambar empat sisi
- poli-a poligon atau gambar bersisi banyak
- lingkaran-lingkaran
Untuk membuat area, Anda harus mengisolasi koordinat spesifik yang ingin Anda petakan. Sebuah peta dapat terdiri dari satu atau lebih area yang ditentukan pada gambar yang, ketika diklik, membuka hyperlink baru.
Untuk 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 ketik 0, 0, 10, 15. Anda kemudian memasukkannya ke dalam peta:
Untuk poligon, Anda memetakan setiap koordinat x, y secara terpisah. Browser Web secara otomatis menghubungkan set koordinat terakhir dengan yang pertama; apa pun di dalam koordinat ini adalah bagian dari peta.
Bentuk lingkaran 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 tetap menggunakan teknologi yang stabil dan dipahami dengan baik ini karena mengetahui bahwa ada alternatif yang lebih efisien yang saat ini sedang digemari oleh desainer Web.
