[RaggiTech]

كاتب الموضوع محمد الناشـري

السلام عليكم ورحمة الله .

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

كيف يمكن فعل ذلك في 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 وغيرها من المواقع.

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

يتبع

[RaggiTech]

سنقوم الان بتطبيق مثال عملي على هذة الاداة

بعد اضافة الاداة 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>

يوجد مثال مرفق .