Ez tulajdonképp ugyan az, mint amikor Photoshopban linkeled be a fejléced menüpontjait vagy más egyéb dolgot. Csak itt a HTML kódban neked kell megadnod a kép koordinátáit. De nem kell megijedni, már erre is van online generátor. :)

De hogy lássátok miről beszélek, itt egy demó. Itt a virogok fejei vannak belinkelve, mind a saját honlapomra mutat:

Ez egy HTML kódból és egy CSS kódból épül fel. A CSS kódban kell megadnod a kép koordinátáit (hogy a linkek hova kerüljenek a képen) ahhoz kerül egy hivatkozási link, ami majd a HTML kódban kell beírni ahhoz a részhez, ahova tartozik, vagyis ahova hivatkozni szeretnél (na, ezt értelmesen megmondtam, de szerintem ez mindenkinek logikus :D).

Na de térjünk arra, hogy hogyan lehet ilyet készíteni.

1. Menj fel erre az oldalra: http://webpresencepartners.com/tools/css-image-map-generator/
2. Itt a SELECT FILES buttonra kattintva kell kiválasztanod a számítógépedről azt a képet, amire hivatkozásokat szeretnél tenni. Ennek sok értelme ugyan nem lesz, igaz majd itt kell ezeket beállítanod, de amikor majd a kódot kéred le (Generated Code) oda viszont annak a képnek az URL címét kell beillesztened a helyére, ebből pedig ugye az következik, hogy a képet fel kell töltened a tárhelyedre. De hogy lássátok miről beszélek:
   <div class="map_image" style="background-image: url('IDE JÖN A KÉP URL CÍME');">.
3. A Visual Editor fülre kattintva tudod megadni a hivatkozásokat a képre.
4. A Preview résznél megnézheted a demót.
5. A Generated Code buttonra kattintva pedig megtalálod a kódot. Itt nem kell semmin sem változtatnod, kivéve az URL címen amiről a 2. pontban írtam.

Az elkészült kódot beilleszted a modulodba és kész is vagy. :)