פקד ImageMap מאפשר יצירת תמונה המכילה קישורים, כאשר כל אזור בתמונה יכול להיות מוגדר כקישור אחר.

נניח שיש לנו תמונה הנראית כך:

נרצה שלחיצה על כל מלבן תוביל למקום אחר (דף "מי אנחנו", דף "דרושים" ודף "מוצרים"), לצורך כך עלינו להגדיר את התמונה כ"מפה" ולהגדיר אזורים על המפה הזו. לצורך העניין נכתוב כך בדף ה – ASPX:

<asp:ImageMap runat="server" ID="myImageMap" 
  ImageUrl="images/mapSample.png">
  <asp:RectangleHotSpot NavigateUrl="Pages/Products" 
    AlternateText="מוצרים" Right="156" Bottom="110" />
  <asp:RectangleHotSpot NavigateUrl="Pages/Jobs" 
    AlternateText="דרושים" Right="312" Bottom="110" 
    Left="156" />
  <asp:RectangleHotSpot NavigateUrl="Pages/AboutUs" 
    AlternateText="מי אנחנו" Right="468" Left="312" 
    Bottom="110" />
</asp:ImageMap>

המאפיין ImageUrl הוא הכתובת לתמונה (בדומה לפקד Image). לפקד ישנם פקדי בנים הנקראים HotSpots כאשר לכל אחד שני מאפיינים עיקריים:

• AlternateText – הכיתוב המופיע כ – Tooltip במידה והעכבר עובר על האזור.
• NavigateUrl – הכתובת לדף כאשר לוחצים על העכבר באזור.

איך מוגדר האזור?

האזור מוגדר לפי סוג ה – HotSpot , במקרה שלנו מדובר באזור מלבני (ישנם גם מעגל ומצולע הנקראים CircleHotSpot ו – PolygonHotSpot בהתאמה). המלבן מוגדר ע"י 4 קואורדינטות : Left, Right, Top ו – Bottom שהן יחסיות למיקום התמונה בדף.

    נתבונן ב –HTML הנוצר עבור ה – ImageMap :

<img id="MainContent_myImageMap" src="images/mapSample.png" 
  usemap="#ImageMapMainContent_myImageMap" />
<map name="ImageMapMainContent_myImageMap" 
  id="ImageMapMainContent_myImageMap">
   <area shape="rect" coords="0,0,156,110" 
     href="Pages/Products" title="מוצרים" alt="מוצרים" />
   <area shape="rect" coords="156,0,312,110" 
     href="Pages/Jobs" title="דרושים" alt="דרושים" />
   <area shape="rect" coords="312,0,468,110" 
     href="Pages/AboutUs" title="מי אנחנו" alt="מי אנחנו" />
</map>

נוכל לראות כאן תג של תמונה (img) אשר נוסף לו מאפיין שנקרא usemap – זה גורם לו להצביע על תג אחר בשם map שנוצר אף הוא עבור הפקד ImageMap והוא מכיל את האזורים.

עבור כל HotSpot נוצר תג בשם area עם מאפייני shape, cords, href, title ו – alt.