خرائط الصور: عبارة عن صورة واحدة ولكنها تحوى العديد من الروابط التشعبية كل رابط يؤدى إلى صفحة معينة أو موقع معين.
ولعمل خرائط الصور نستخدم العديد من الوسوم
- وسم إدراج الصورة التى سنستخدمها فى إنشاء الخريطة <img>
<img src="egypt.gif" border="0">
- نقوم بعمل خريطة للصورة التى تم إدراجها باستخدام الوسم <map> وهذا الوسم يأتى عقب الوسم img
<img src="images/egypt.gif" border="0" style="alt:egy;height:300px;width:250px">
<map>
</map>
- نقوم باستخدام الخاصية name لكى نخبر المتصفح أننا سوف نستخدم خريطة تحمل الاسم وليكن "egy"
<map name="egy">
</map>
- نشير إلى اسم الخريطة فى وسم الصورة باستخدام الخاصية usemap ونضع علامة # ثم اسم الخريطة
<img src="images/egypt.gif" usemap="#egy" alt="egypt" style=":300px;width:250px;border="0"">
<map name="egy">
</map>
- الأن نحن بحاجة لتحديد الأماكن فى الصورة التى عندما نقف عليها بالماوس سيكون لها روابط تشعبية
- نحتاج إلى برنامج لمعالجة الصور وليكن برنامج الرسام paint وهو برنامج مجانى يأتى مع الويندوز
- نقوم بالوقوف على هذا البرنامج ونحدد الاحداثيات للمناطق التى نريد ان نكون لها روابط تشعبية
كما فى الشكل التالي:-
نلاحظ انه عندما وقفنا بالمؤشر على القاهرة الموجودة فى خريطة مصر ظهرت احداثيات المكان فى أسفل البرنامج كما هو موضح
ونلاحظ أن اجداثيات المكان تتحدد بالبعد x والبعد Y
ونحتاج إلى وسم area وهو الوسم الذى يقوم بعمل الارتباط على خريطة الصور
مثال:-
<img src="images/egypt.gif" usemap="#egy" alt="egypt" style=":300px;width:250px;border="0"">
<map name="egy">
<area>
<area>
<area>
</map>
- نحتاج إلى تحديد شكل المنطقة التى تكون الارتباط وهى إما ان تأخذ شكل دائرة أو شكل منتظم (مربع - مستطيل) أو شكل غير منتظم
- الخاصية shape هى المسئولة عن تحديد شكل الرابط سواء دائرة circle او شكل منتظم rect أو شكل غير منتظم poly
مثال:
<img src="images/egypt.gif" usemap="#egy" alt="egypt" style=":300px;width:250px;border="0"">
<map name="egy">
<area shape="rect">
<area shape ="poly">
<area shape ="circle">
</map>
- وسم coords وهو المسئول عن الاحداثيات.
- احداثيات الدائرة تكون عبارة عن مركز الدائرة x,y ثم نصف القطر
<area shape="circle" coords="300,40,40">
- احداثيات الشكل المنتظم تكون عبارة عن نقطة البدء (x1,y1)ونقطة النهاية(x2,y2)
<area shape ="rect" coords="300,40,400,90">
- احداثيات الشكل غير المنتظم وهنا تكون عبارة عن اكثر من نقطتين حسب زوايا الشكل
<area shape ="poly" coords="300,40,360,69,480,150">
- بالطبع كل شكل سيكون عليه رابط مختلف hyperlink وينتقل بنا إلى صفحة معينة
<img src="images/egypt.gif" usemap="#egy" alt="egypt" style=":300px;width:250px;border="0"">
<map name="egy">
<area shape="rect" coords="300,40,400,80" href="cairo.html">
<area shape ="poly" coords="500,160 ,570,200,680,190" href="desert.html">
<area shape ="circle" coords="700,120,40" href="giza.html">
</map>
ليست هناك تعليقات:
إرسال تعليق