מפת תמונה היא תמונה שאזורים מסוימים בה הם קישורים. המבנה של מפת תמונה מתחיל בתג <map> לתג הזה יש מאפיין אחד, והוא name, שמכיל את שם המפה. בין התג הפותח לתג הסוגר, יהיו תגי <area>

המאפיינים של תג <area> הם:

alt מכיל תיאור קצר של הקישור.
href מכיל את הכתובת שאליה מפנה הקישור.
nohref במידה והאיזור לא צריך לקשר לשום מקום.
target היכן יפתח הקישור. יכיל _blank בשביל לפתוח את הקישור בחלון חדש.
shape יכיל את סוג הצורה של השטח, מקבל אחד מהערכים הבאים: circle (עיגול), rect (מרובע), poly (מצולע), default (כל השטח שלא מוגדר).
coords מכיל את הקואורדינטות של השטח על המפה.

בשביל תמונה משתמשים בתג <img>, שכבר הכרתם, אבל מוסיפים לו מאפיין שלא דיברנו עליו עד עכשיו, והוא usemap. usemap מקבל את שם המפה שמתאימה לתמונה. שימו לב שלפני השם צריך לבוא הסימן #.

ככה יראה קוד לדוגמא של מפת תמונה:

1 2 3 4 5 6 7

<map name="myMap">    <area shape="circle" coords="200,100,50" href="page1.html" alt="page1">    <area shape="rect" coords="0,0,100,100" href="page2.html" alt="page2">    <area shape="default" nohref> </map> <img src="images/mymap.jpg" width="300" height="200" usemap="#myMap">

קואורדינאטות של עיגול יהיו x של מרכז המעגל, y של מרכז המעגל, והרדיוס של המעגל.
קואורדינאטות של מרובע יהיו x, y, רוחב, וגובה.
קואורדינטות של מצולע יהיו x ו y של כל קודקוד במצולע.