Co warto wiedzieć
• Użyj obrazu o normalnym rozmiarze, którego przeglądarka nie przeskaluje. Będziesz także potrzebować edytora obrazów i HTML lub edytora tekstu.
• Podczas wstawiania obrazu dodaj dodatkowy atrybut, aby zidentyfikować współrzędne mapy.
• Na przykład:
Ten artykuł wyjaśnia, jak tworzyć mapy obrazów przy użyciu znaczników HTML zamiast edytora map obrazów. Większość edytorów graficznych pokaże współrzędne myszy, gdy wskażesz obraz, czyli wszystkie dane potrzebne do rozpoczęcia pracy z mapami obrazów.
Tworzenie mapy obrazu
Aby utworzyć mapę obrazu, najpierw wybierz obraz, który będzie służył jako podstawa mapy. Obraz powinien mieć "normalny rozmiar" - to znaczy, nie powinieneś używać obrazu tak dużego, że przeglądarka go przeskaluje.
Kiedy wstawiasz obraz, dodasz dodatkowy atrybut, który identyfikuje współrzędne mapy:
Kiedy tworzysz mapę obrazu, tworzysz obszar, który można kliknąć na obrazie, więc współrzędne mapy muszą być zgodne z wysokością i szerokością wybranego obrazu. Mapy obsługują trzy różne typy kształtów:
- rekt-prostokąt lub figura czworokątna
- wielokąt lub figura wieloboczna
- koło-koło
Aby utworzyć obszary, musisz wyizolować określone współrzędne, które zamierzasz zmapować. Mapa może składać się z jednego lub więcej zdefiniowanych obszarów na obrazie, które po kliknięciu otwierają nowe hiperłącze.
W przypadku prostokąta mapujesz tylko lewy górny i prawy dolny róg. Wszystkie współrzędne są wymienione jako x, y (nad, w górę). Tak więc dla lewego górnego rogu 0, 0 i prawego dolnego rogu 10, 15 należy wpisać 0, 0, 10, 15. Następnie dołączasz go do mapy:
Dla wielokąta mapujesz każdą współrzędną x, y osobno. Przeglądarka internetowa automatycznie łączy ostatni zestaw współrzędnych z pierwszym; wszystko wewnątrz tych współrzędnych jest częścią mapy.
Kształty okręgów wymagają tylko dwóch współrzędnych, takich jak prostokąt, ale dla drugiej współrzędnej określasz promień lub odległość od środka okręgu. Tak więc dla okręgu o środku 122, 122 i promieniu 5 napisałbyś 122, 122, 5:
Wszystkie obszary i kształty mogą być zawarte w tym samym znaczniku mapy:
Rozważania
Mapy graficzne były znacznie bardziej popularne w erze Web 1.0 w latach 90., aż do wczesnych lat 2000. Mapy graficzne często stanowiły podstawę nawigacji w witrynie. Projektant stworzyłby jakiś obrazek wskazujący pozycje menu, a następnie ustawił mapę.
Nowoczesne podejścia zachęcają do projektowania responsywnego i używania kaskadowych arkuszy stylów do kontrolowania umieszczania obrazów i hiperłączy na stronie.
Chociaż tag mapy jest nadal obsługiwany w standardzie HTML, korzystanie z urządzeń przenośnych o niewielkich rozmiarach może prowadzić do nieoczekiwanych problemów z wydajnością map obrazów. Ponadto problemy z przepustowością lub uszkodzone obrazy wpływają na wartość mapy obrazu.
Nie krępuj się więc nadal korzystać z tej stabilnej, dobrze rozumianej technologii, wiedząc, że istnieją obecnie wydajniejsze alternatywy, które są obecnie modne wśród projektantów stron internetowych.
