HTML Görüntü Haritaları hala kullanılıyor mu?

113

İnsanlar hala eski HTML Görüntü Haritalarını kullanıyor mu? Sahip olanlar:

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

Yoksa daha yeni, daha iyi bir alternatif var mı?

html imagemap

— ss888
kaynak

1

Daha iyi olup olmadığını sorduğunuzda, karşılaştırma için bir araç vermelisiniz. Ne şekilde veya hangi amaçla daha iyi? Elimizdeki resim haritalarından daha güçlü araçlar var, daha karmaşık da ...

— Jeff Parker

2

İyi bir nokta - Uzun zamandır bir görüntü haritası kullanmadım ve bunun yerini geliştirilmiş bir kodlama yöntemi almış olabileceğini düşündüm.

— ss888

1

Javascript / katman tabanlı işlevsellik ve flash, hemen hemen karşılaştığım her şeyde görüntü haritalarının yerini aldı ... Birini aktif görevde en son ne zaman gördüğümü hatırlayamıyorum. Yine de aklınızda belirli bir amaç varsa, daha spesifik bir yanıt daha kolay elde edilebilir :)

— Jeff Parker

21

Bu gün ve yaş lol Flash'tan kaçınmayı tercih ederim.

— ss888

4

Yapacak hızlı, hızlı koşan ve yalnızca biraz kötü bir şey arıyorsanız, görüntü haritaları işinizi görecektir. İşi aklımda aynı hızda yapacak geniş çapta desteklenen bir yedek yok. Şimdi, SVG, Canvas için zamanınız olsaydı ve IE'yi desteklenen tarayıcı listenizden hariç tutmanızın bir sakıncası yoksa ...

— Jeff Parker

53

Evet, insanlar hala resim haritalarını kullanıyor. Bir alternatif, öğeleri mutlak konumlandırma ve CSS kullanarak konumlandırmak olabilir, ancak bu daha iyi olmayabilir. Aynı zamanda görüntü haritalarındaki gibi şekillere sahip olmanıza da izin vermez

— JohnP
kaynak

Tamam, yani html resim haritaları hala iyi mi? Fareyle üzerine gelme efektleri eklemeye ne dersiniz?

— ss888

Görüntü haritalarındaki en büyük sorunum, ilişkilendirdikleri görüntülerin aksine tarayıcı veya ekran boyutuna ölçeklenmemeleridir. Umarım OP, SVG formatlarını araştırır

— Martin

2

bunu görüntünün boyutuna göre ölçeklendirmelisiniz. Görüntü boyutunuzu pencerenin boyutuna göre yapmak. daha sonra her zaman bu genişlik / yükseklik oranını görüntü harita oranıyla karşılaştırır ve ardından koordinatların üzerine yazmak için javascript kullanır. Jquery tabanlı resim boyutu olay işleyicisi $ (pencere) .resize (function () {.... kodunuz ...});

— skidadon

46

HTML5 spesifikasyonundalar , bu nedenle kullanımdan kaldırılmayacaklar.

Bunları hala özgürce kullanabilirsiniz, web geliştirmede kesinlikle yerleri vardır. Ya da diyebilirim ki, bir şeyi bir görüntü haritasıyla en iyi şekilde çözebileceğiniz nadir durumlar vardır.

— kapa
kaynak

19

CSS veya görüntü eşlemlerini kullanmanın alternatif bir çözümü, HTML etki alanına gömülü SVG grafiklerinden yararlanmak olabilir.

Bu teknik kullanılarak fareyle üzerine gelme efektlerinin nasıl elde edileceğine ilişkin bir eğitim, bu eğiticide açıklanmaktadır: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Temel kazanım SVG elemanlar da dahil olmak üzere geleneksel dom olayları tetiklediğini olmanın onmouseover ve onmouseout .

— Norman H
kaynak

1

+1 SVG, rastgele herhangi bir şekilde etkileşim olabileceğinden, görüntü haritalarına en iyi doğrudan alternatiftir. Vektör koordinatlarının, SVG öğelerine bir görüntü dolgusu vererek raster piksel görüntüleri kestiği yerde, görüntü haritalarına çok benzer bir şey oluşturulabilir . Ancak o zaman bile, alan haritaları bazı durumlarda daha iyi olabilir (daha basittirler ve görüntüyü kırpmazlar, bu bazen istenebilir).

— user56reinstatemonica8

18

Evet, html görüntü haritaları, özellikle alanınızın bir çokgen olmasını istiyorsanız iyidir. Haritanıza javascript ile de rollover efektleri ekleyebilirsiniz. Burada güzel bir öğretici ve demo var:

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

— LostLin
kaynak

8

+1 - CSS ve mutlak konumlandırma ile pek çok şey yapabilirsiniz, ancak görüntü eşlemeleri, dikdörtgen olmayan bir çokgen alanda gezinmeyi algılamanın tek yoludur.

— Blazemonger

10

Görüntü Haritaları hala tüm tarayıcılar tarafından desteklenen HTML5 spesifikasyonlarında bulunmaktadır.

JQuery RWD Görüntü Haritaları kullanılarak duyarlı tasarıma uyarlanabilirler: https://github.com/stowball/jQuery-rwdImageMaps

Görüntü eşlem koordinatlarını algılar ve otomatik olarak yeniden boyutlandırır.

Eklenti olarak Wordpress geliştiricileri için de mevcuttur: http://wordpress.org/plugins/responsive-image-maps/

Basit ve etkili çözüm.

— Daniele B
kaynak

9

Evet, hala görüntü haritaları kullanıyorum, ancak son projem Raphaël'i kullandı. Bir şeyi hazırlayıp çalıştırmak oldukça kolaydı.

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

Web sitelerinden:

Raphaël ['ræfeɪəl], grafik oluşturmak için SVG W3C Önerisini ve VML'yi bir temel olarak kullanıyor. Bu, oluşturduğunuz her grafik nesnesinin aynı zamanda bir DOM nesnesi olduğu anlamına gelir, bu nedenle JavaScript olay işleyicileri ekleyebilir veya daha sonra değiştirebilirsiniz. Raphaël'in amacı, çizim vektör sanatını tarayıcılar arası uyumlu ve kolay hale getirecek bir adaptör sağlamaktır.

Güzel basit resim haritası örneği:

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

— David Newcomb
kaynak

2

Mızmızlanmak ve olumsuz oy kullanmak yerine bağlantıyı kendiniz düzeltmeniz çok zaman almazdı :(

— David Newcomb

2

Sevgili David, olumsuz oyu kaldırdım. Sadece bozuk olan bağlantıyı nasıl düzeltmemi istersin? http://raphaeljs.com/Tamamen kaldırır ve yalnızca Github örneğini veririm .

— orschiro

6

Yığın sitelerinin amacı işbirliğidir. Kırık bir bağlantı görürseniz, mümkünse düzeltin. Kırık bağlantılar olarak düşünmeyin, bunlar kaynaklara yönelik kırık işaretçilerdir. Kaynak taşınmışsa, bağlantıyı, kaynağın yeni konumuna işaret edecek şekilde güncelleyin: önemli olan budur. Raphaeljs eskiden kendi sitesine sahipti ama belli ki GitHub'a taşındı. Şu anda nerede yaşadığını bulmaları için insanları Google'a geri gönderiyor muyuz? Yoksa buradan gitmelerine yardım mı edeceğiz? Avustralya örneği, farklı bir yerde yaşadığı aynı örnektir.

— David Newcomb

http://raphaeljs.com/Domain kaydı sona ama bir yeniden doğrudan (dünyada) bağlantılarını güncellemelerini için bir şans herkese vermek için olaya el koydu varken bağlantı sonunda kıracak. Belki @orschiro makaledeki biriyle başlayabilir ve burada SO'daki işbirliği çabasına katkıda bulunabilirsiniz.

— David Newcomb

1

Anlaşıldı, teşekkürler David! Cevabı güncelledim ve bağlantıyı düzelttim. :-)

— orschiro

4

Artık modern web sitelerinde nadiren kullanıldığını görsem de, müşterilerim tarafından e-posta kampanyalarında kullanılıyor gibi görünüyor. Ancak fark ettim ve onayladım mobil cihazlarda koordinat sistemiyle ilgili bazı ölçeklendirme sorunları olduğunu .

** Bu iş parçacığının eski olduğunu biliyorum, yeni bir e-posta kampanyası sorunu için bununla ilgili biraz araştırma yapıyordum ve başka birine yardımcı olabileceğini düşündüm.

3. taraf düzenleme

Resim haritası desteğindeki litmus.com'daki soru 04 / 2014'ten itibaren

Görüntü eşlemeleri ALT etiketlerini desteklemez, görüntüler yüklenmediğinde, bazı istemcilerde ALT metni görüntülenmez.

Görüntü haritası kullanımı genellikle, teslim edilebilirlik sorunlarına neden olabilecek ve indirme hızını engelleyebilecek (özellikle mobil kullanıcılar için önemlidir) büyük görüntülerin kullanılmasıyla sonuçlanır.

Ve en önemlisi, iOS (iphone / ipad), görüntü ölçeklendiğinde bağlantıların kopmasına neden olan görüntü eşleme bağlantı koordinatlarını ölçeklemez. İOS, e-posta açıklarının büyük çoğunluğunu temsil ettiğinden (iPhone + iPad = http://emailclientmarketshare.com/ aracılığıyla% 38 ) bu önemlidir.

— spindle79
kaynak

0

Evet, hala kullanılıyor

Bir görüntü haritası, bir kullanıcının bir görüntünün farklı bölümlerine tıklayarak birçok sayfaya köprü oluşturmasına olanak tanır. Görüntü haritasını kullanarak, aynı görüntünün belirli bir alanıyla ilgili koordinat listelerini oluştururuz ve köprüyü farklı bir konuma veririz. Bunu tek bir görüntü içinde kullanarak birden çok bağlantı veriyoruz.

Daha

— Srikrushna
kaynak

-2

resim haritası html ve html5'te oldukça ilginç bir seçenek, hala kullanılıyorlar ve kişisel olarak onu seviyorum, bu nedenle sorunumun ölçeklendirmeyle ilgili olduğunu mobil cihazlarda buluyorum

evet kendi kendime deneyimledim ancak html html5'e kayıtlı bir öğrenciyim ve yeni başlayanlar için w3chools bağlantısını takip etmek istiyorum

http://www.w3schools.com/html/html_images.asp

bu [sayfadan çok şey kazanacaksınız

— Shoua Iqbal
kaynak