מדריך ASP.NET – פקדים מתקדמים: ImageMap

‏ • Sela

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

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

ASPNET - פקד 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.

תגיות: , , , ,

IdoFlatow

יועץ ומרצה בקבוצת סלע לתחומי Web ו-Data. עוסק בתחומים Asp.Net, WCF, Silverlight, IIS ו-Entity Framework.כותב הקורס הרשמי של מיקרוסופט ל-WCF וכן שותף בכתיבת הספר ASP.NET Programmer's Reference (ISBN 978-0470505458)

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!