וובמאסטר - תיכנות ובניית אתרים

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

IdoFlatow ,‏ מכללת סלע‏ ‏/‏ 7 פברואר, 2011
F+
F-

פקד 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)
תגיות: פיתוח‏  /  צד שרת‏  /  מדריך‏  /  ASP.NET‏  /  .net‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות