Pewnie kiedyś będzie taka sytuacja, ze robiąc stronę będziemy musieli "zmapować" obrazek. Taka sytuacja może mieć miejsce, na przykład wtedy, kiedy mamy mapkę jakieś miejscowości, i chcemy aby użytkownik najeżdżając na daną miejscowość/obiekt najpierw zobaczył jego krótki opis (alt) a następnie klikając na niego przeniósł się do pod strony z dokładniejszym opisem.

W tym artykule zajmiemy się tym, jak zrobic mapowanie za pomocą standartowego programu graficznego windows'a - Paint. Nowoczesne edytory www mają bardzo łatwe narzędzia do robienia map obrazów. Ale nie każdy ma taki edytor. Dlatego zajmiemy się alternatywą. 

Przedstawię sposób mapowania tego oto pliku - flagi nato.

Pierwsze co musimy zrobić, to otworzyć plik graficzny za pomocą Painta, dlatego tez przy win98 musimy formatować go do pliku z rozszerzeniem bitmapy (*.bmp)
Nie jestem pewien, ale wydaje mi się że w Windows Xp, paint otwiera pliki jpg.

Jeżeli mamy już otwarty nasz plik w oknie painta, zaczynamy pracę!

1. Otwarty rysunek w programie Paint.

2. Mapa obrazu może być: okrągła, prostokątna, wielokątna. W tym punkcie pokaże jak pobierać współrzędne punktów, następnie zrobimy odsyłacz w kształcie prostokąta. A więc: zaznaczony fragment (a) zaznaczyłem kursor i jego pozycję na obrazku, natomiast fragment (b) to miejsce z którego odczytujemy dane współrzędne.

 Na powyższym screenie widać jak pobierać dane współrzędne. Umieszczamy kursor nad lewym górnym rogiem naszego prostokąta-mapy i odczytujemy współrzędne. Następnie pobieramy dane dolnego prawego rogu naszego prostokąta-mapy. Te dwie wartości wystarczą nam do tego, aby przeglądarka umieściła na rysunku odsyłacz w formie prostokąta. Kod tej operacji wygląda tak:

<IMG SRC="nato_flaga.jpg " USEMAP="#mapa_pierwsza">
<MAP NAME ="mapa1">
<AREA SHAPE=RECT COORDS="5,15, 122, 113" HREF="adres pliku odsyłacza" alt="opis obszaru >
</MAP>

Co daje efekt:

Przyjrzyjmy się chwilę tagom html'a. 

1 -> <IMG SRC="nato_flaga.jpg " USEMAP="#mapa_pierwsza">
2 -> <MAP NAME ="mapa1">
3 -> <AREA SHAPE=RECT COORDS="5,15, 122, 113" HREF="adres pliku odsyłacza"   alt="opis obszaru >
4 -> </MAP>

w pierwszej linijce wskazujemy jaki obrazek ma być zmapowany, oraz w atrybucie "USEMAP" wskazujemy nazwę mapy.

Druga linijka definiuję nazwę mapy (uprzednio podaną w 1 linijce.

Trzecia linijka opisuję mapę obrazu, "Shape" czyli kształt może przyjąć różne wartości:

- RECT -jesli mapa ma być prostąkątem
- POLYGON - jesli mapa ma być wielokątem
- CIRCLE - jesli mapa ma być okręgem.

3. Aby nasza mapa miała odsyłacz w kształcie wielokąta musimy wskazać przeglądarce "końce" określanego obszaru. Tak więc aby uzyskać taki efekt (kliknij i przytrzymaj lewy przycisk na środku obrazu) 

należy posłużyć się takim oto kodem:

<img  src="nato_flaga.jpg" usemap="#mapa2"><map name="mapa2">
<area href="http://www.lamek-design.glt.pl" target="_blank" shape="polygon" coords="200, 50, 217, 111, 279, 131, 219, 151, 199, 214, 181, 151, 122, 133, 180, 113"></map>

Jak widać w powyższym, podajemy w parametrze "coords" końce/rogi naszej figury. Musimy także zmienić nazwę mapy. Zmieniła się także zawartość atrybutu "shape" na "polygon"

4. Mapa w kształcie Koła.

Aby zmapować obrazek obszarem w kształcie koła, musimy podać współrzędne:

<img border="0" src="nato_flaga.jpg" usemap="#FPMap1" width="400" height="261">
<map name="#mapa3">
<area href="http://www.lamek-design.glt.pl" target="_blank" shape="circle" coords="199, 131, 72"></map>

- pierwsze dwie współrzędne - to współrzędne środka okręgu, trzecia to długość promienia okręgu.

Efekt: (przytrzymaj lewy przycisk nad środkiem rysunku)

Życzę powodzenia! W razie jakichkolwiek pytań, zapraszam do pisania na podanego niżej meila. Pozdrawiam.