Manfaat dan kekurangan untuk menggunakan peta gambar
Ada satu titik dalam sejarah desain web di mana banyak situs menggunakan fitur yang dikenal sebagai "peta gambar". Ini adalah daftar koordinat yang melekat pada gambar tertentu pada suatu halaman. Koordinat ini membuat area hyperlink pada gambar itu, menambahkan "hot spot" ke grafik, yang masing-masing dapat dikodekan untuk menautkan ke tempat yang berbeda. Ini jauh berbeda dari sekadar menambahkan tag tautan ke gambar, yang akan menyebabkan seluruh grafik menjadi satu tautan besar ke satu tujuan.
Contoh - bayangkan memiliki file grafik dengan gambar Amerika Serikat. Jika Anda ingin setiap negara bagian "dapat diklik" sehingga mereka pergi ke halaman tentang keadaan khusus itu, Anda dapat melakukannya dengan peta gambar. Demikian pula, jika Anda memiliki gambar band musik, Anda dapat menggunakan peta gambar agar setiap anggota dapat diklik pada halaman berikutnya tentang anggota band tersebut.
Apakah peta gambar terdengar berguna? Mereka memang benar, tetapi mereka tidak disukai di Web hari ini. Ini, setidaknya sebagian, karena peta gambar memerlukan koordinat tertentu untuk bekerja. Situs saat ini dibangun untuk menjadi responsif dan skala gambar berdasarkan ukuran layar atau perangkat. Ini berarti bahwa koordinat yang telah ditetapkan sebelumnya, yaitu bagaimana peta gambar bekerja, terpecah ketika skala situs dan gambar berubah ukuran. Inilah sebabnya mengapa peta gambar jarang digunakan di situs produksi saat ini, tetapi mereka masih memiliki keuntungan untuk demo atau contoh di mana Anda memaksa ukuran halaman.
Ingin tahu cara membuat peta gambar, khususnya bagaimana melakukannya dengan Dreamweaver? . Prosesnya tidak terlalu sulit, tetapi juga tidak mudah, jadi Anda harus memiliki pengalaman sebelum memulai.
Mulai
Mari kita mulai. Langkah pertama yang perlu Anda ambil adalah menambahkan gambar ke halaman web Anda. Anda kemudian akan mengklik pada gambar untuk menyorotnya. Dari sana, Anda harus pergi ke menu properti (dan klik salah satu dari tiga alat gambar hotspot: persegi panjang, lingkaran atau poligon. Jangan lupa untuk memberi nama gambar Anda, yang dapat Anda lakukan di property bar. Anda dapat menamai apa pun yang Anda inginkan. Gunakan "peta" sebagai contoh.
Sekarang, gambar bentuk yang Anda inginkan pada gambar Anda menggunakan salah satu alat ini. Jika Anda membutuhkan tempat persegi panjang, gunakan rectange. Sama untuk lingkaran. Jika Anda ingin bentuk hotspot yang lebih kompleks, gunakan poligon. Ini adalah apa yang Anda mungkin akan gunakan dalam contoh peta AS, karena poligon akan memungkinkan Anda untuk menjatuhkan poin dan membuat bentuk yang sangat kompleks dan tidak teratur pada gambar
Di jendela properti untuk hotspot, ketik atau telusuri ke halaman yang harus dihubungi hotspot. Inilah yang membuat area yang dapat ditautkan itu. Terus tambahkan hotspot hingga peta Anda selesai dan semua tautan yang ingin Anda tambahkan telah ditambahkan.
Setelah selesai, tinjau ulang peta gambar Anda di browser untuk memastikannya berfungsi dengan benar. Klik setiap tautan untuk memastikan tautan masuk ke sumber daya atau laman web yang tepat.
Kekurangan Peta Gambar
Sekali lagi, ketahuilah bahwa peta gambar memiliki beberapa kekurangan, bahkan di luar kurangnya dukungan dengan situs web responsif. Firs, detail kecil dapat dikaburkan dalam peta gambar. Misalnya, peta gambar geografis dapat membantu menentukan benua mana pengguna itu berasal, tetapi peta ini mungkin tidak cukup rinci untuk menunjukkan negara asal pengguna. Ini berarti peta gambar dapat membantu menentukan apakah pengguna berasal dari Asia tetapi tidak dari Kamboja pada khususnya.
Peta gambar juga dapat dimuat dengan lambat. Mereka seharusnya tidak digunakan beberapa kali di situs web karena mereka menempati terlalu banyak ruang untuk digunakan pada setiap halaman situs web. Terlalu banyak peta gambar pada satu halaman akan menciptakan hambatan serius dan berdampak besar pada kinerja situs .
Akhirnya, peta gambar mungkin tidak mudah bagi pengguna dengan masalah visual untuk diakses. Jika Anda menggunakan peta gambar, Anda juga harus membuat sistem navigasi lain untuk pengguna ini sebagai alternatif.
Intinya
Saya menggunakan peta gambar dari waktu ke waktu ketika saya mencoba menyusun demo singkat desain dan cara kerjanya. Misalnya, saya mungkin mencemooh desain untuk aplikasi seluler dan saya ingin menggunakan peta gambar untuk membuat hotspot untuk mensimulasikan interaktivitas aplikasi. Ini jauh lebih mudah dilakukan daripada mengkode aplikasi, atau bahkan membangun halaman web palsu yang dibuat dengan standar HTML dan CSS saat ini. Dalam contoh spesifik ini, dan karena saya tahu perangkat apa yang akan saya demonstrasikan desainnya dan dapat menskalakan kode ke perangkat itu, peta gambar berfungsi, tetapi menempatkannya ke dalam situs produksi atau aplikasi sangat rumit dan sebaiknya dihindari pada hari ini. situs web.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 9/7/17.