KWALIFIKACJA PGF4 - CZERWIEC 2014

PYTANIE NR 12.
Która z poniższych technik umożliwia przypisanie różnych łączy URL do różnych części obrazu na stronie WWW?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Mapa obrazu (image map) pozwala zdefiniować na jednym obrazie kilka klikalnych obszarów, a każdy z nich może mieć własny adres w atrybucie href. Realizuje się to przez powiązanie obrazu z <map> (usemap) oraz zdefiniowanie regionów <area>.

Pełne wyjaśnienie:

Technika "mapy obrazu" (image map) w HTML służy do przypisania różnych odnośników URL do różnych fragmentów jednego obrazu. Działa to tak, że obraz (<img>) wskazuje mapę poprzez atrybut usemap, a w elemencie <map> definiuje się klikalne regiony za pomocą <area>.

Każdy obszar <area> może mieć własny atrybut href, czyli osobny docelowy adres URL. Dodatkowo określa się kształt i położenie obszaru (np. prostokąt, koło, wielokąt) za pomocą atrybutów typu shape i coords. Dzięki temu jedna grafika może pełnić funkcję menu, mapy lub interaktywnej infografiki bez dzielenia pliku na wiele obrazków.

Odpowiedź "Zastosowanie jednego obrazu bez podziału" jest błędna, bo nie wprowadza mechanizmu rozróżniania kliknięć w różnych miejscach obrazu. "Użycie jednego łącza URL dla całego obrazu" również nie spełnia warunku pytania: cały obraz jest wtedy jednym linkiem, więc nie da się przypisać wielu różnych adresów. "Optymalizacja obrazu pod kątem rozmiaru pliku" dotyczy wydajności (np. kompresji), a nie interakcji i nawigacji.

W praktyce mapy obrazów są użyteczne w prostych, statycznych projektach. Trzeba jednak pamiętać o dostępności: obszary powinny mieć opisowy tekst alternatywny (alt), a w projektach responsywnych często lepszym rozwiązaniem bywa SVG, bo łatwiej skaluje się do różnych rozdzielczości.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Mapa obrazu to mechanizm HTML, w którym jeden obraz zawiera wiele klikalnych regionów. Obraz jest powiązany z <map> przez atrybut usemap, a poszczególne obszary definiuje się elementami <area> z własnym href.
Użyj mapy obrazu: dodaj do <img> atrybut usemap, a następnie zdefiniuj w <map> kilka <area>. Każdy obszar ma własny href, więc może prowadzić do innej podstrony.
Standardowo stosuje się trzy kształty: prostokąt, koło i wielokąt. W <area> określasz je atrybutem shape oraz współrzędnymi w coords. Pozwala to dopasować obszar klikalny do elementów grafiki.
Gdy cały obraz jest jednym odnośnikiem, każde kliknięcie prowadzi do tego samego adresu. Pytanie dotyczy sytuacji, gdy różne fragmenty obrazu mają różne cele (różne URL). Tę funkcję zapewnia dopiero podział na regiony w mapie obrazu.
Tak. Mapy obrazów są częścią współczesnego HTML i działają w popularnych przeglądarkach. Choć w nowych, responsywnych projektach często wybiera się SVG, image map nadal jest poprawnym i użytecznym rozwiązaniem dla prostych, statycznych interakcji.
Typowe problemy to źle wyznaczone współrzędne obszarów, nakładanie się regionów bez kontroli priorytetu oraz pomijanie tekstów alternatywnych. Warto testować klikane miejsca w różnych przeglądarkach i pamiętać o dostępności (opisowe alt).
Najważniejsze jest nadanie obszarom sensownych opisów, aby użytkownik wiedział, dokąd prowadzi dany region. W praktyce każdy <area> powinien mieć opisowy atrybut alt. Dodatkowo zadbaj o logiczną strukturę strony i alternatywy nawigacji.
SVG często wygrywa przy responsywności i skalowaniu, bo elementy wektorowe naturalnie dopasowują się do rozdzielczości. Jeśli grafika ma się płynnie skalować, ma mieć animacje albo złożone interakcje, SVG bywa prostsze w utrzymaniu niż mapy oparte o współrzędne.
Atrybut usemap w <img> wskazuje, z którą mapą ma być powiązany obraz (odwołuje się do nazwy mapy). Dzięki temu przeglądarka wie, że kliknięcia w obrębie obrazu mają być interpretowane przez obszary zdefiniowane w <map>.
Naucz się rozpoznać cel techniki: wiele URL w jednym obrazie. Zapamiętaj rolę <map> i <area>, oraz że każdy obszar ma własny href. Przećwicz przykład z 2–3 regionami i sprawdź działanie w przeglądarce.
info

Statystycznie 62% uczniów zna prawidłową odpowiedź. średnie

W praktyce zawodowej kluczowe jest to, że mapa obrazu (image map) pozwala zdefiniować na jednym obrazie kilka klikalnych obszarów, a każdy z nich może mieć własny adres w atrybucie href.

Źródła:

  • MDN Web Docs: "Image maps" (HTML) – https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Image_maps - accessed 2026-02-28
  • MDN Web Docs: "&lt;map&gt;: The Image Map element" – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map - accessed 2026-02-28
  • MDN Web Docs: "&lt;area&gt;: The Image Map Area element" – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area - accessed 2026-02-28

Materiały:

  • Dokumentacja MDN: Image maps
  • Specyfikacja HTML (sekcja dotycząca elementów map/area oraz atrybutu usemap)
  • Ćwiczenia praktyczne: stworzenie obrazu z 3 obszarami &lt;area&gt; (rect/circle/poly) i test w przeglądarce

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego