Generator mapy obrazu: rysuj klikalne obszary, pobierz HTML | We.Inc
Rysuj prostokąty, koła i wielokąty na własnym obrazie, nadaj każdemu link i tekst alt, a potem skopiuj klasyczny HTML map i area lub responsywną wersję SVG.
Generator mapy obrazu
Mapa obrazu zamienia części jednego obrazka w osobne linki. Wczytaj obraz, przeciągaj, aby rysować prostokąty lub koła, klikaj punkty, aby tworzyć wielokąty, i wpisz link oraz tekst alt dla każdego obszaru. Skopiuj klasyczny HTML map i area albo responsywną wersję SVG, której obszary zmniejszają się razem z obrazem na telefonach.
kształty area i ich coords
Znaczenie
Lewy górny i prawy dolny róg
Środek i promień
Każdy wierzchołek po kolei; kształt sam się zamyka
(brak)
Wszystko, czego nie obejmuje inny obszar
Plany pięter, schematy produktów, zdjęcia zespołu i mapy często potrzebują kilku linków w jednym obrazie. Rysowanie obszarów na oko jest dużo szybsze niż mierzenie pikseli, a Twój obraz nigdy nie opuszcza komputera: jest odczytywany w przeglądarce, a w kodzie używany jest tylko jego rozmiar.
Użyj przykładowego planu piętra lub wybierz własny plik obrazu. Współrzędne są mierzone w rzeczywistych pikselach obrazu, nawet gdy podgląd jest pomniejszony.
Wybierz Prostokąt lub Koło i przeciągnij po obrazie albo wybierz Wielokąt, kliknij każdy wierzchołek, a potem naciśnij Zakończ wielokąt.
Edytuj link, tekst alt i współrzędne każdego obszaru na liście. Wpisane współrzędne aktualizują rysunek, co pozwala też użytkownikom klawiatury zbudować mapę.
Skopiuj klasyczny HTML lub responsywne SVG. Zastąp ścieżkę obrazu w kodzie miejscem, w którym plik będzie leżał na Twojej stronie.
Każdy obszar z href potrzebuje tekstu alt. To właśnie on jest odczytywany przez czytniki ekranu, więc wpisz cel, na przykład Zarezerwuj stolik w kawiarni.
Współrzędne klasycznej mapy obrazu to stałe piksele CSS. Jeśli CSS zmniejsza obraz na telefonach, obszary zostają tam, gdzie były, więc w płynnych układach używaj wyniku SVG.
Klikalne obszary powinny być na tyle duże, by wygodnie je stuknąć, i nie powinny stykać się bez odstępu.
Nie ukrywaj jedynej drogi do strony wewnątrz obrazu. Powtórz ważne linki jako zwykły tekst gdzieś w pobliżu.
Najczęściej zadawane pytania
Jak połączyć mapę z obrazem?
Nadaj mapie nazwę, a potem ustaw atrybut usemap na img na tę samą nazwę poprzedzoną znakiem #, na przykład usemap="#site-map" i map name="site-map". Generator zapisuje oba za Ciebie.
Czy mapy obrazu HTML są responsywne?
Same z siebie nie. Współrzędne to liczby pikseli CSS, więc nie podążają za obrazem, którego rozmiar zmienia CSS. Wynik SVG rozwiązuje to za pomocą viewBox, który skaluje obraz i kształty linków razem.
Czy mój obraz jest wysyłany na serwer?
Nie. Plik jest otwierany przez lokalny adres object URL, aby przeglądarka mogła go wyświetlić i odczytać jego szerokość i wysokość. Nic nie jest wysyłane do We.Inc ani nikogo innego.
Czy obszary mogą się nakładać?
Mogą. Tam, gdzie dwa obszary się nakładają, kliknięcie trafia do tego, który jest wymieniony w mapie jako pierwszy, więc umieszczaj mniejsze obszary przed większymi, które je otaczają.
Klasyczna mapa czy linki SVG
Para map i area działa w przeglądarkach od dziesięcioleci i zachowuje obraz jako zwykły img, co jest proste dla narzędzi do treści. Jej słabością są stałe współrzędne.
Wersja SVG rysuje obraz wewnątrz elementu svg i owija każdy kształt w link. Ponieważ wszystko dzieli jeden viewBox, obszary skalują się idealnie, a na kształtach możesz dodać obrys po najechaniu za pomocą CSS.
Dostępne klikalne obrazy
Nadaj samemu obrazowi tekst alt opisujący cały obrazek, a każdemu obszarowi tekst alt nazywający jego cel. Użytkownicy klawiatury przechodzą przez obszary klawiszem Tab w kolejności z kodu, więc ułóż je w sensownej kolejności czytania.
Przetestuj wynik, przechodząc po nim klawiszem Tab. Jeśli fokus skacze po obrazie, zmień kolejność wierszy na liście przed skopiowaniem.
Kod dla przykładowego planu piętra
To dwa wyniki, które generator tworzy dla czterech przykładowych obszarów.
Klasyczne map i area
Działa wszędzie przy naturalnym rozmiarze obrazu 600 na 360 pikseli.
Responsywne linki SVG
viewBox odpowiada rozmiarowi obrazu, więc każdy kształt linku skaluje się razem z obrazkiem.
Obszar {n}
Narysuj swoje obszary
Rysuj prostokąty, koła i wielokąty na przykładowym planie piętra lub własnym obrazie, a potem ustaw link i tekst alt dla każdego obszaru.
Twój obraz
Narzędzie rysowania
Prostokąt
Koło
Wielokąt
Zakończ wielokąt
Anuluj
Rozmiar obrazu: {w} × {h} pikseli.
Kliknij każdy wierzchołek, a potem Zakończ wielokąt.