Apakah Peta Gambar HTML masih digunakan?

113

Apakah orang masih menggunakan Peta Gambar HTML lama? Yang dengan:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Atau apakah ada alternatif yang lebih baru dan lebih baik?

html imagemap

— ss888
sumber

1

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

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

— JohnP
sumber

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 ...});

— skidad

46

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.

— kapa
sumber

19

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 .

— Norman H.
sumber

1

+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:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
sumber

8

+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.

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.

— Daniele B
sumber

9

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:

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.

Contoh peta gambar sederhana yang bagus:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— David Newcomb
sumber

2

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.

— David Newcomb

1

Dimengerti, terima kasih David! Saya memperbarui balasan dan memperbaiki tautannya. :-)

— orschiro

4

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

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.

— spindle79
sumber

0

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

— Srikrushna
sumber

-2

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

— Shoua Iqbal
sumber