تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
معلومة ImageMap :: جميلة للغاية
#1
كاتب الموضوع محمد الناشـري
السلام عليكم ورحمة الله .

نشاهد احيانا في بعض المواقع وجود خرائط للارشاد مثلاً على موقع معين على الطبيعة ..
هذة الخرائط تحوى نقاط عند المرور عليها بمؤشر الفأرة تتحول الى نقاط فعالة الى ارتباطات لمواقع او صفحات اخرى .
كذلك من الامثلة الحية نجد احيانا ان البنر الرئيسي للموقع يحوى روابط لصفحات اخرى .

كيف يمكن فعل ذلك في asp.net ؟.

توفر asp.net أداة جميلة جداً لعمل ذلك وهي الاداة ImageMap وهي موجودة ضمن شريط الادوات تحت التبويب Standard

سنتعرف الان على اهم خصائص هذة الاداة .
1 - خاصية ImageUrl لتحديد مصدر الصور .
2 - HotSpots وذلك للوصول الى النافذة HotSpotCollectionEditor
ومنها يمكن اضافة النقاط الفعالة الى الصورة الخاصة بنا حيث يوجد ثلاثة اشكال
Circle للتحديد الدائري .
Rectangle للتحديد على شكل مستطيل او مربع
Polygon للتحديد الحر او بشكل مضلع .

يمكن اضافة هذة النقاط من خلال الايقونة Add ومن السهم الذي بالايقونة يمكن اختيار الشكل المناسب .

سنتعرف الان على اهم الخصائص المشتركة لهذة الاشكال الثلاثة
1 - Alternate Text النص الذي يظهر عند الوقوف على هذة النقطة .

2 - HotSpotMode نوع الحدث للنقطة الفعالة سواء كان ارتباط لصفحة اخرى او لاعادة تحميل الصفحة نفسها .

3 - NavigateUrl الرابط المراد الانتقال اليه .

4- Target لتحديد ما اذا كنت ترغب في فتح الرابط في نفس الاطار او في اطار جديد ... الخ .

يتبقى الان اهم الخصائص وهي خاصية Apperance وهي لتحديد موضع النقطة الفعالة على الصورة . وهي تختلف من شكل لاخر
حيث نجد في Circle القيم X ,Y ,Radius ..
كما نجد في Rectangle القيم Left,Right,Bottm,Top
اما في الشكل Polygon فنقوم بتحديد جميع النقاط التي تحدد الشكل الحر او المضلع ونفصل بينها باستخدام الفاصلة .

في الحقيقة هناك صعوبة في تحديد القيم لهذة الاشكال ولكن توجد مواقع تقوم بذلك نيابة عنك مثل
Free Online HTML Image Mapping Tool وغيرها من المواقع.

وبالنسبة لي استخدم برنامج الفرونت بيج لكي اقوم بتحديد كافة النقاط المطلوبة بكل سهول وبساطة .

يتبع
الرد }}}}
تم الشكر بواسطة:
#2
سنقوم الان بتطبيق مثال عملي على هذة الاداة

بعد اضافة الاداة ImageMap الى صفحتنا وتحديد الصورة المناسبة ستظهر لنا صفحة السورس بالشكل التالي

كود :
<asp:ImageMap ID="ImageMap2" runat="server"
ImageAlign="Middle" ImageUrl="~/testImageMap.gif">
</asp:ImageMap>




</asp:ImageMap>
سنقوم الان باضافة النقاط الفعالة وقد تعمدت تجربة جميع الاشكال التي تحدثنا عنها في السابق .
من الخاصية HotSpots نقوم بالضغط على العلامه المقابلة لـ Collection وذلك للوصول الى النافذة HotSpotCollectionEditor
ومنها نضيف ثلاث اشكال مختلفة وقد اشرنا الى طريقة الاضافة في السابق .
بعد اضافة نقاطنا وضبطها يصبح السورس لدينا بالشكل التالي


كود :
<asp:ImageMap ID="ImageMap1" runat="server" DescriptionUrl="~/hotspot.jpg"
ImageAlign="Middle" ImageUrl="~/testImageMap.gif">
<asp:CircleHotSpot AlternateText="" Radius="39" X="506" Y="52"
NavigateUrl="~/testImageMap.gif" />
<asp:RectangleHotSpot AlternateText="" Bottom="24" Left="295"
Right="451" Top="86" HotSpotMode="Navigate" NavigateUrl="http://www.google.com.sa" />
<asp:PolygonHotSpot Coordinates="283, 30, 282, 82, 149, 83, 175, 55, 206, 55, 198, 36, 233, 39, 243, 22, 262, 34"
HotSpotMode="Navigate" Target="_blank" AlternateText=" "
NavigateUrl="http://vb4arab.com/vb/" />
</asp:ImageMap>
يوجد مثال مرفق .


الملفات المرفقة
.rar   ImageMap.rar (الحجم : 21.11 ك ب / التحميلات : 36)
الرد }}}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  معلومة :: التقويم Calendar RaggiTech 3 830 25-05-13, 01:28 PM
آخر رد: shaker.soft
  { معلومة} .. معلومات Request سعود 3 768 25-05-13, 01:26 PM
آخر رد: shaker.soft
  معلومة :: Datalist Paging RaggiTech 0 447 29-09-12, 12:31 PM
آخر رد: RaggiTech
  معلومة Error pages -- مهمة للغاية RaggiTech 1 369 29-09-12, 04:33 AM
آخر رد: RaggiTech
  معلومة:: أجزاء الويب Web Parts RaggiTech 4 826 29-09-12, 04:23 AM
آخر رد: RaggiTech
  معلومة :: Site Navigation RaggiTech 0 392 29-09-12, 04:08 AM
آخر رد: RaggiTech
  معلومة :: WebUserControl RaggiTech 1 380 29-09-12, 04:02 AM
آخر رد: RaggiTech
  معلومة ::: AdRotator RaggiTech 1 527 29-09-12, 03:42 AM
آخر رد: RaggiTech
  ::معلومة:: Datalist Paging a_senan 0 384 21-09-12, 05:51 PM
آخر رد: a_senan
  معلومة :: إضافة أكثر من Site Map للموقع a_senan 0 315 21-09-12, 05:47 PM
آخر رد: a_senan

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم