Czy mapy obrazów HTML są nadal używane?

113

Czy ludzie nadal używają starych map graficznych HTML? Te z:

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

A może jest nowsza, lepsza alternatywa?

html imagemap

— ss888
źródło

1

Kiedy pytasz, czy jest coś lepszego, czy nie, powinieneś podać środki do porównania. Lepiej w jaki sposób lub w jakim celu? Do naszej dyspozycji są potężniejsze narzędzia niż mapy obrazów, również bardziej złożone ...

— Jeff Parker,

2

Słuszna uwaga - od dawna nie korzystałem z mapy obrazu i pomyślałem, że mogła zostać zastąpiona ulepszoną metodą kodowania.

— ss888

1

Funkcjonalność oparta na Javascript / warstwie i flash zastąpiły mapy obrazów w prawie wszystkim, z czym się spotkałem ... Nie pamiętam, kiedy ostatnio widziałem jeden w służbie. Jeśli masz konkretny cel na uwadze jednak, bardziej szczegółowa odpowiedź może być łatwiej dostępne :)

— Jeff Parker

21

Wolałbym unikać Flasha w dzisiejszych czasach lol.

— ss888

4

Jeśli szukasz czegoś, co można szybko zrobić, szybko uruchomić i tylko lekko złego, mapy obrazu wystarczą. Nie ma szeroko obsługiwanego zamiennika, który wykona pracę z taką samą prędkością, jak mi się wydaje. Teraz, jeśli miał czas dla SVG, Canvas, i nie przeszkadza za wyjątkiem IE z listy obsługiwanej przeglądarki ...

— Jeff Parker

53

Tak, ludzie nadal używają map obrazów. Alternatywą byłoby pozycjonowanie elementów za pomocą pozycjonowania bezwzględnego i CSS, ale niekoniecznie jest to lepsze. Nie pozwala również na tworzenie kształtów takich jak na mapach obrazu

— John P.
źródło

Ok, więc mapy obrazów HTML są nadal dobre? Co powiesz na dodanie efektów najechania / najechania?

— ss888

Moim głównym problemem związanym z mapami obrazów jest to, że w przeciwieństwie do obrazów, które są z nimi powiązane, nie skalują się do rozmiaru przeglądarki ani ekranu. Mam nadzieję, że OP zbada formaty SVG

— Martin

2

musisz skalować go z rozmiarem obrazu. Dopasowanie rozmiaru obrazu do rozmiaru okna. następnie zawsze porównując ten stosunek szerokości do wysokości ze współczynnikiem mapy obrazu, a następnie używając javascript do nadpisania współrzędnych. Program obsługi zdarzenia rozmiaru obrazu oparty na jquery to $ (okno) .resize (function () {.... twój kod ...});

— skidadon,

46

Są w specyfikacji HTML5 , więc nie zostaną wycofane.

Nadal możesz z nich swobodnie korzystać, z pewnością nadal mają swoje miejsce w tworzeniu stron internetowych. Albo mogę powiedzieć, że istnieją takie rzadkie sytuacje, w których najlepiej można rozwiązać coś za pomocą mapy obrazu.

— kapa
źródło

19

Alternatywnym rozwiązaniem do korzystania z CSS lub map obrazów byłoby wykorzystanie grafiki SVG osadzonej w HTML dom.

Jeden samouczek dotyczący uzyskiwania efektów najechania myszą za pomocą tej techniki jest opisany w tym samouczku: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Najważniejsze jest to, że elementy SVG uruchamiają również tradycyjne zdarzenia dom, w tym onmouseover i onmouseout .

— Norman H.
źródło

1

+1 SVG to najlepsza bezpośrednia alternatywa dla map obrazów, ponieważ interakcja może mieć dowolny kształt. Można utworzyć coś bardzo podobnego do map obrazowych, w którym współrzędne wektorowe dzielą obrazy rastrowe, nadając elementom SVG wypełnienie obrazu . Ale nawet wtedy mapy obszarów mogą być lepsze w niektórych przypadkach (są prostsze i nie przycinają obrazu, co czasami może być pożądane).

— user56reinstatemonica8

18

Tak, mapy graficzne html są dobre, zwłaszcza jeśli chcesz, aby Twój obszar był wielokątem. Możesz również dodać efekty najazdu do swojej mapy za pomocą javascript. Jest tutaj fajny tutorial i demo:

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

— LostLin
źródło

8

+1 - Chociaż możesz wiele zdziałać za pomocą CSS i pozycjonowania bezwzględnego, mapy obrazów są nadal jedynym sposobem na wykrycie ruchu na nieprostokątnym obszarze wielokąta.

— Blazemonger

10

Mapy obrazów są nadal w specyfikacji HTML5, obsługiwane przez wszystkie przeglądarki.

Można je dostosować do projektowania responsywnego za pomocą map obrazów jQuery RWD: https://github.com/stowball/jQuery-rwdImageMaps

Wykrywa i automatycznie zmienia rozmiar współrzędnych map obrazu.

Jest również dostępny dla programistów Wordpress jako wtyczka: http://wordpress.org/plugins/responsive-image-maps/

Proste i skuteczne rozwiązanie.

— Daniele B
źródło

9

Tak, nadal używam map obrazów, ale mój ostatni projekt wykorzystywał Raphaël. Dość łatwo było coś uruchomić.

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

Z ich strony internetowej:

Raphaël ['ræfeɪəl] wykorzystuje rekomendację SVG W3C i VML jako podstawę do tworzenia grafiki. Oznacza to, że każdy utworzony obiekt graficzny jest również obiektem DOM, więc możesz dołączyć moduły obsługi zdarzeń JavaScript lub zmodyfikować je później. Celem firmy Raphaël jest dostarczenie adaptera, który ułatwi i ułatwi rysowanie grafiki wektorowej w różnych przeglądarkach.

Ładny, prosty przykład mapy obrazu:

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

— David Newcomb
źródło

2

Samodzielne naprawienie linku zamiast narzekania i obniżania głosów nie wymagałoby wiele :(

— David Newcomb

2

Drogi Davidzie, wycofałem głos przeciw. Jak mam naprawić link, który jest po prostu uszkodzony? Usunąłbym http://raphaeljs.com/całkowicie i podałbym tylko przykład Github.

— orschiro

6

Celem stron stosowych jest współpraca. Jeśli widzisz uszkodzony link, napraw go, jeśli możesz. Nie myśl o tym w kategoriach zepsutych linków, są to uszkodzone wskaźniki do zasobów. Jeśli zasób został przeniesiony, zaktualizuj łącze, aby wskazywało nową lokalizację zasobu: to jest ważna rzecz. Raphaeljs miał swoją własną witrynę, ale najwyraźniej przeniósł się do GitHub. Czy odsyłamy ludzi z powrotem do Google, aby dowiedzieć się, gdzie obecnie mieszka? A może pomożemy im przejść stąd? Przykład Australii jest tym samym przykładem, po prostu żyje w innym miejscu.

— David Newcomb,

http://raphaeljs.com/Link zostanie ostatecznie przełamać po wygaśnięciu Rejestracja domeny, ale nie jest re-direct na nią teraz, aby dać każdemu (w świecie) okazję do aktualizacji ich powiązania. Być może @orschiro możesz zacząć od tego w artykule i dodać do wspólnego wysiłku tutaj w SO.

— David Newcomb,

1

Zrozumiano, dziękuję David! Zaktualizowałem odpowiedź i poprawiłem link. :-)

— orschiro

4

Chociaż rzadko widuję je już używane w nowoczesnych witrynach internetowych, wydają się być używane przez moich klientów w ich kampaniach e-mailowych. Jednak zauważyłem i potwierdziłem, że występują problemy ze skalowaniem w układzie współrzędnych na urządzeniach mobilnych.

** Wiem, że ten wątek jest stary. Właśnie prowadziłem dodatkowe badania dotyczące ostatniego problemu z kampanią e-mailową i pomyślałem, że może to pomóc komuś innemu.

Edycja zewnętrzna

Pytanie na litmus.com dotyczące obsługi map obrazu pochodzi z 04/2014

Mapy obrazów nie obsługują tagów ALT, gdy obrazy nie są załadowane, tekst ALT nie jest wyświetlany w niektórych klientach.

Użycie mapy obrazu generalnie powoduje użycie dużych obrazów, co może powodować problemy z dostarczaniem i utrudniać prędkość pobierania (szczególnie ważne dla użytkowników mobilnych).

A co najważniejsze, iOS (iphone / ipad) nie skaluje współrzędnych łącza mapy obrazu, gdy obraz jest skalowany, co zrywa łącza. Ponieważ iOS stanowi większość otwieranych wiadomości e-mail (iPhone + iPad = 38% przez http://emailclientmarketshare.com/ ), jest to ważne.

— wrzeciono79
źródło

0

Tak, nadal jest używany

Mapa obrazu pozwala użytkownikowi na hiperłącze do wielu stron, klikając różne części obrazu, po prostu korzystając z mapy obrazu tworzymy listy współrzędnych odnoszących się do określonego obszaru tego samego obrazu i podajemy hiperłącze do innej lokalizacji. Używając tego w jednym obrazie, dajemy wiele linków.

Więcej

— Srikrushna
źródło

-2

mapa obrazu jest dość interesującą opcją w html i html5 nadal są używane i osobiście ją uwielbiam, dlatego znajduję użycie na urządzeniach mobilnych mój problem jest związany ze skalowaniem

tak, sam tego doświadczyłem, ale jestem studentem zapisanym w html html5 i dla początkujących chciałbym śledzić link w3chools

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

wiele zyskasz na tej [stronie

— Shoua Iqbal
źródło