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
Odpowiedzi:
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
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 ...});
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.
+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:
+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.
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.
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.
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.
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.
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
Odpowiedzi:
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
źródło
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.
źródło
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 .
źródło
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
źródło
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.
źródło
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:
Ładny, prosty przykład mapy obrazu:
http://dmitrybaranovskiy.github.io/raphael/australia.html
źródło
http://raphaeljs.com/całkowicie i podałbym tylko przykład Github.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.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
źródło
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
źródło
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
źródło