Zadanie 110: Mapa Obrazu HTML (Image Map)

Cel

Stworzenie strony internetowej zawierającej obrazek człowieka, który reaguje na najechanie kursorem myszy na poszczególne części ciała (głowa, tułów, ręce, nogi), wyświetlając odpowiedni opis.

Wymagania

1. Obrazek: Schematyczny rysunek człowieka (np. czlowiek.png lub czlowiek.svg).
2. Image Map: Zastosowanie znaczników <map> i <area> do zdefiniowania interaktywnych obszarów.
3. Interakcja: Wyświetlanie nazwy części ciała po najechaniu myszką (mouseover) i czyszczenie napisu po zjechaniu (mouseout).
4. JavaScript: Obsługa zdarzeń.

Instrukcja wykonania

1. Umieść plik obrazka (np. czlowiek.svg) w folderze projektu.
2. Utwórz plik index.html.
3. Wstaw obrazek za pomocą znacznika <img> dodając atrybut usemap="#nazwa-mapy".
4. Zdefiniuj mapę:

   <map name="nazwa-mapy">
       <area shape="circle" coords="x,y,r" ... >
       <area shape="rect" coords="x1,y1,x2,y2" ... >
   </map>
   

5. Aby określić współrzędne (coords), możesz użyć graficznego edytora map w internecie (np. "online image map editor") lub dobrać je metodą prób i błędów.
6. Dodaj skrypt JavaScript, który będzie zmieniał tekst w wybranym elemencie HTML (np. <div> lub <span>) w zależności od tego, na jaki obszar najechano.

Przykład użycia

Po najechaniu na głowę postaci, pod obrazkiem powinien pojawić się napis: "Głowa".