Ketika Anda bertanya apakah ada sesuatu yang lebih baik atau tidak, Anda harus memberikan alat untuk perbandingan. Lebih baik dalam hal apa, atau untuk tujuan apa? Ada alat yang lebih kuat daripada peta gambar yang kami miliki, lebih kompleks juga ...
Jeff Parker
2
Poin bagus - Saya belum pernah menggunakan peta gambar untuk waktu yang lama dan berpikir itu mungkin telah digantikan oleh metode pengkodean yang ditingkatkan.
ss888
1
Fungsionalitas berbasis Javascript / layer, dan flash telah menggantikan peta gambar di hampir semua hal yang saya temui ... Saya tidak ingat kapan terakhir kali saya melihatnya dalam tugas aktif. Namun, jika Anda memiliki tujuan tertentu, jawaban yang lebih spesifik mungkin lebih tersedia :)
Jeff Parker
21
Saya lebih suka menghindari Flash di zaman sekarang ini lol.
ss888
4
Jika Anda mencari sesuatu yang cepat untuk dilakukan, cepat dijalankan, dan hanya sedikit jahat, peta gambar akan melakukan pekerjaan itu. Tidak ada pengganti yang didukung secara luas yang akan melakukan pekerjaan dengan kecepatan yang sama menurut pikiran saya. Sekarang jika Anda punya waktu untuk SVG, Canvas, dan tidak keberatan mengecualikan IE dari daftar browser yang Anda dukung ...
Jeff Parker
Jawaban:
53
Ya, orang masih menggunakan peta bergambar. Alternatifnya adalah memposisikan elemen menggunakan pemosisian absolut dan CSS, tetapi itu belum tentu lebih baik. Itu juga tidak memungkinkan Anda memiliki bentuk seperti pada peta gambar
Ok, jadi peta gambar html masih bagus? Bagaimana jika menambahkan efek hover / rollover?
ss888
Masalah utama saya dengan peta gambar adalah bahwa tidak seperti gambar yang diasosiasikan dengannya, peta gambar tidak berskala untuk browser atau ukuran layar. Saya berharap OP meneliti format SVG
Martin
2
Anda harus menskalakannya dengan ukuran gambar. Membuat ukuran gambar Anda relatif terhadap ukuran jendela. kemudian selalu membandingkan rasio lebar / tinggi dengan rasio peta gambar, dan kemudian menggunakan javascript untuk menimpa koordinat. Pengatur kejadian ukuran gambar berbasis jquery adalah $ (window) .resize (function () {.... yourcode ...});
Anda masih dapat dengan bebas menggunakannya, mereka pasti masih memiliki tempat dalam pengembangan web. Atau saya bisa katakan, kejadian langka itu ada di mana Anda bisa menyelesaikan sesuatu dengan baik dengan peta gambar.
+1 SVG adalah alternatif langsung terbaik untuk peta gambar, karena interaksi dapat dilakukan dengan bentuk sembarang apa pun. Sesuatu yang sangat mirip dengan peta gambar dapat dibuat di mana koordinat vektor memotong gambar piksel raster, dengan memberi elemen SVG isi gambar . Tetapi meskipun demikian, peta area mungkin lebih baik dalam beberapa kasus (lebih sederhana, dan tidak memotong gambar, yang terkadang diinginkan).
pengguna56reinstatemonica8
18
Ya peta gambar html bagus terutama jika Anda ingin area Anda menjadi poligon. Anda dapat menambahkan efek rollover ke peta Anda juga dengan javascript. Ada tutorial dan demo yang bagus di sini:
+1 - Meskipun Anda dapat melakukan banyak hal dengan CSS dan pemosisian absolut, peta gambar masih merupakan satu-satunya cara untuk mendeteksi hover pada area poligon non-persegi panjang.
Blazemonger
10
Image Maps masih dalam spesifikasi HTML5, didukung oleh semua browser.
Raphaël ['ræfeɪəl] menggunakan Rekomendasi SVG W3C dan VML sebagai dasar untuk membuat grafik. Ini berarti setiap objek grafis yang Anda buat juga merupakan objek DOM, sehingga Anda dapat melampirkan penangan peristiwa JavaScript atau memodifikasinya nanti. Tujuan Raphaël adalah menyediakan adaptor yang akan membuat gambar seni vektor kompatibel lintas-browser dan mudah.
Tidak perlu banyak waktu bagi Anda untuk memperbaiki sendiri tautan daripada mengeluh dan downvoting :(
David Newcomb
2
David terkasih, saya menghapus suara negatifnya. Bagaimana Anda ingin saya memperbaiki tautan yang baru saja rusak? Saya akan menghapus http://raphaeljs.com/sepenuhnya dan hanya memberikan contoh Github.
orschiro
6
Inti dari situs tumpukan adalah kolaborasi. Jika Anda melihat tautan rusak, perbaiki jika Anda bisa. Jangan menganggapnya sebagai tautan yang rusak, itu adalah petunjuk yang rusak ke sumber daya. Jika sumber daya telah dipindahkan, perbarui tautannya sehingga mengarah ke lokasi baru sumber daya: itu yang penting. Raphaeljs dulu memiliki situsnya sendiri tetapi jelas-jelas telah pindah ke GitHub. Apakah kami mengirim orang kembali ke Google untuk mencari tempat tinggalnya sekarang? Atau apakah kita membantu mereka pergi dari sini? Contoh Australia adalah contoh yang sama yang tinggal di tempat yang berbeda.
David Newcomb
The http://raphaeljs.com/Link akhirnya akan memecah ketika pendaftaran domain berakhir tapi ada re-langsung pada sekarang untuk memberikan semua orang (di dunia) kesempatan untuk memperbarui link mereka. Mungkin @orschiro Anda bisa memulai dengan yang ada di artikel dan menambah upaya kolaboratif di SO.
Meskipun saya jarang melihatnya digunakan di situs web modern lagi, tampaknya mereka digunakan oleh klien saya dalam kampanye email mereka. Namun, saya telah memperhatikan, dan mengonfirmasi bahwa ada beberapa masalah penskalaan dengan sistem koordinat di perangkat seluler.
** Saya tahu utas ini sudah lama, saya baru saja melakukan beberapa penelitian tambahan tentang ini untuk masalah kampanye email baru-baru ini dan berpikir itu dapat membantu orang lain di telepon.
Peta gambar tidak mendukung tag ALT, ketika gambar tidak dimuat teks ALT tidak ditampilkan di beberapa klien.
Penggunaan peta gambar umumnya menghasilkan penggunaan gambar besar yang dapat menyebabkan masalah pengiriman dan menghambat kecepatan unduh (terutama penting bagi pengguna seluler).
Dan yang paling penting, iOS (iphone / ipad) tidak menskalakan koordinat tautan peta gambar ketika gambar diskalakan yang merusak tautan. Karena iOS mewakili sebagian besar pembukaan email (iPhone + iPad = 38% melalui http://emailclientmarketshare.com/ ) ini penting.
Peta gambar memungkinkan pengguna untuk membuat hyperlink ke banyak halaman dengan mengklik bagian gambar yang berbeda. Cukup dengan menggunakan peta gambar kita membuat daftar koordinat yang berkaitan dengan area tertentu dari gambar yang sama dan memberikan hyperlink ke lokasi yang berbeda. Dengan menggunakan ini dalam satu gambar, kami memberikan banyak tautan.
peta gambar adalah opsi yang cukup menarik di html dan html5 mereka masih digunakan dan saya pribadi menyukainya, oleh karena itu saya menemukan masalah di perangkat seluler masalah saya terkait dengan penskalaan
ya saya sudah mengalaminya sendiri namun saya seorang siswa yang terdaftar di html html5 dan untuk pemula saya ingin mengikuti tautan w3chools
Jawaban:
Ya, orang masih menggunakan peta bergambar. Alternatifnya adalah memposisikan elemen menggunakan pemosisian absolut dan CSS, tetapi itu belum tentu lebih baik. Itu juga tidak memungkinkan Anda memiliki bentuk seperti pada peta gambar
sumber
Mereka ada dalam spesifikasi HTML5 , jadi mereka tidak akan usang.
Anda masih dapat dengan bebas menggunakannya, mereka pasti masih memiliki tempat dalam pengembangan web. Atau saya bisa katakan, kejadian langka itu ada di mana Anda bisa menyelesaikan sesuatu dengan baik dengan peta gambar.
sumber
Solusi alternatif untuk menggunakan CSS atau peta gambar akan menggunakan grafik SVG yang disematkan ke dalam dom HTML.
Satu tutorial tentang cara mencapai efek gerakan mouse menggunakan teknik ini dijelaskan dalam tutorial ini: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Kuncinya adalah bahwa elemen SVG juga memicu peristiwa dom tradisional termasuk onmouseover dan onmouseout .
sumber
Ya peta gambar html bagus terutama jika Anda ingin area Anda menjadi poligon. Anda dapat menambahkan efek rollover ke peta Anda juga dengan javascript. Ada tutorial dan demo yang bagus di sini:
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
sumber
Image Maps masih dalam spesifikasi HTML5, didukung oleh semua browser.
Mereka dapat diadaptasi ke desain responsif menggunakan jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps
Ini mendeteksi dan secara otomatis mengubah ukuran koordinat peta gambar.
Ini juga tersedia untuk pengembang Wordpress sebagai plugin: http://wordpress.org/plugins/responsive-image-maps/
Solusi sederhana dan efektif.
sumber
Ya, saya masih menggunakan peta gambar, namun proyek terakhir saya menggunakan Raphaël. Sangat mudah untuk menyiapkan dan menjalankan sesuatu.
http://dmitrybaranovskiy.github.io/raphael/
Dari situs web mereka:
Contoh peta gambar sederhana yang bagus:
http://dmitrybaranovskiy.github.io/raphael/australia.html
sumber
http://raphaeljs.com/sepenuhnya dan hanya memberikan contoh Github.http://raphaeljs.com/Link akhirnya akan memecah ketika pendaftaran domain berakhir tapi ada re-langsung pada sekarang untuk memberikan semua orang (di dunia) kesempatan untuk memperbarui link mereka. Mungkin @orschiro Anda bisa memulai dengan yang ada di artikel dan menambah upaya kolaboratif di SO.Meskipun saya jarang melihatnya digunakan di situs web modern lagi, tampaknya mereka digunakan oleh klien saya dalam kampanye email mereka. Namun, saya telah memperhatikan, dan mengonfirmasi bahwa ada beberapa masalah penskalaan dengan sistem koordinat di perangkat seluler.
** Saya tahu utas ini sudah lama, saya baru saja melakukan beberapa penelitian tambahan tentang ini untuk masalah kampanye email baru-baru ini dan berpikir itu dapat membantu orang lain di telepon.
Pengeditan pihak ketiga
Pertanyaan di litmus.com tentang dukungan peta gambar adalah dari 04/2014
sumber
Ya, masih digunakan
Peta gambar memungkinkan pengguna untuk membuat hyperlink ke banyak halaman dengan mengklik bagian gambar yang berbeda. Cukup dengan menggunakan peta gambar kita membuat daftar koordinat yang berkaitan dengan area tertentu dari gambar yang sama dan memberikan hyperlink ke lokasi yang berbeda. Dengan menggunakan ini dalam satu gambar, kami memberikan banyak tautan.
Lebih
sumber
peta gambar adalah opsi yang cukup menarik di html dan html5 mereka masih digunakan dan saya pribadi menyukainya, oleh karena itu saya menemukan masalah di perangkat seluler masalah saya terkait dengan penskalaan
ya saya sudah mengalaminya sendiri namun saya seorang siswa yang terdaftar di html html5 dan untuk pemula saya ingin mengikuti tautan w3chools
http://www.w3schools.com/html/html_images.asp
Anda akan mendapatkan banyak manfaat dari [halaman ini
sumber