Zadanie 110: Interaktywne Mapy Obrazów

Wstęp

Mapy obrazów (Image Maps) pozwalają na zdefiniowanie "gorących obszarów" (hotspots) na jednym obrazku. Dzięki temu jedno zdjęcie może prowadzić do wielu różnych podstron w zależności od tego, w co dokładnie kliknie użytkownik. Choć jest to starsza technika, nadal bywa użyteczna w prostych projektach, np. do tworzenia planów budynków, map geograficznych czy zdjęć grupowych z odnośnikami do profili.

Do tworzenia map służą znaczniki:

<map name="...">: Kontener definiujący mapę.
<area>: Definiuje pojedynczy klikalny obszar wewnątrz mapy.
Atrybut usemap="#nazwa_mapy" w tagu <img>: Wiąże obrazek z definicją mapy.

Cel zadania

Stworzenie strony HTML wyświetlającej zdjęcie, na którym wydzielone są minimum 3 aktywne obszary prowadzące do różnych miejsc.

Instrukcja

Znajdź odpowiednie zdjęcie: Może to być np. zdjęcie Twojego biurka (monitor, klawiatura, myszka), plan mieszkania, mapa Polski, lub zdjęcie grupowe. Zapisz je jako np. mapa.jpg w folderze projektu.
Stwórz strukturę HTML: Standardowy szkielet strony.

Dodaj obrazek z atrybutem usemap:

<img src="mapa.jpg" alt="Moja mapa" usemap="#mojamapa">

Zdefiniuj mapę:

<map name="mojamapa">
    <!-- Tutaj dodasz obszary -->
</map>

Dodaj obszary (<area>): Tag <area> przyjmuje atrybuty shape (kształt), coords (współrzędne) i href (link).

Dostępne kształty:
- rect (prostokąt): coords="x1,y1,x2,y2" (lewy-górny róg, prawy-dolny róg).
- circle (kółko): coords="x,y,r" (środek x, środek y, promień).
- poly (wielokąt): coords="x1,y1,x2,y2,x3,y3..." (kolejne wierzchołki).
Przykład:
```
<map name="mojamapa">
    <area shape="rect" coords="34,44,270,350" href="komputer.html" alt="Komputer">
    <area shape="circle" coords="337,300,44" href="kawa.html" alt="Kubek kawy">
</map>
```
Jak zdobyć współrzędne? Najłatwiej otworzyć zdjęcie w programie Paint lub GIMP. W Paintcie na dole paska stanu widać współrzędne kursora myszy.

Zadanie do wykonania

Stwórz plik index.html.
Umieść w nim dowolne zdjęcie.
Zdefiniuj na nim minimum 3 klikalne obszary (używając przynajmniej raz rect i raz circle lub poly).
Obszary mają prowadzić do zewnętrznych stron (np. https://google.com) lub do lokalnych plików/kotwic (możesz użyć # jeśli nie masz innych stron).
Dodaj atrybut title do każdego <area>, aby po najechaniu myszką pojawiał się dymek z opisem.

Weryfikacja

Otwórz plik w przeglądarce. Po najechaniu myszką na zdefiniowane obszary kursor powinien zmienić się w "rączkę" (pointer), a kliknięcie powinno przenieść Cię pod wskazany adres.