|
الدرس
الرابع عشر
الخرائط الصورية
-
مبدأ الخرائط الصورية هو انشاء صورة واحدة
تحتوي على العديد من الوصلات التي تقوم باٍيصالنا الى مواقع مختلفة .
سنتعامل في هذا الموضوع مع مؤثرات الصور والوصلات التشعبية
وكذلك مع أحد برامج تحرير الصور مثل
Photoshop
.
لنبدأ العمل www.tartoos.com
ليكن لدينا صورة نريدها ولندرجها في الصفحة كمايلي :
>
"
0 " =
BORDER
"
300
" = HEIGHT
"
400
"
= WIDTH
" اسم الصورة " =
<IMG SRC
ولنضيف لهذه الشيفرة بارامتر جديد وهو
USEMAP
ويستخدم كمايلي :
USEMAP = " #map-name "
وهو يجبر المتصفح أن يستخدم هذه الصورة كخريطة وذلك حسب
التحديدات الموجودة في تعريف هذه الصورة
( الخريطة ) . اٍن القيمة
map-name
فهي الاسم الذي نريد أن نعنيه للخريطة ( وهو أي اسم نريده ) وهو مسبوق
باٍشارة #
.
فاٍذا أسمينا الخريطة
)
our map )
فتصبح الشيفرة كمايلي :
WIDTH =
"400" HEIGHT = "300" BORDER = "0"
" اسم الصورة" =
< IMG SRC
USEMAP = "ourmap" >
وهكذا نكون قد عرفنا الخريطة أولاً.www.tartoos.com
أما الآن لنجبر المتصفح أننا نريد خريطة تحمل الاسم
ourmap
< MAP NAME = "ourmap" >
لاحظ أننا لم نستخدم الرمز
# هنا
.
<
/MAPE > ثم
نحتاج الى تحديد المناطق الساخنة للوصلات التشعبية على الخريطة وليكن لدينا
دائرة ومستطيل وشكلين عشوائيين .
والآن كيف تحدد هذه المناطق باستخدام
HTML
وكيف يمكن للمتصفح أن يميزها عن غيرها ؟
الجواب هو باستخدام المؤثر
< AREA
>
والذي يدرج ضمن المؤثر
<
MAP >
وبنفس عدد المناطق الساخنة التي نريدها :
< MAP NAME = "ourmap" >
< AREA
>
< AREA >
< AREA
>
< AREA
>
< /MAP >
والآن لنحدد شكل كل منطقة , ولذلك نستخدم البارامتر
SHAP
.
SHAP
: اٍذاً يستخدم لتحديد
شكل كل منطقة حددناها , وهو يأخذ ثلاثة قيم لتحديد شكل المنطقة الساخنة وهي
:
RECT
: للأشكال المربعة
والمستطيلة والمنتظمة .
CIRCL6
: للدوائر .
Poly
:
للأشكال العشوائية والمضلعة .
وبما أن لدينا دائرة ومستطيل وشكلين عشوائيين في الخريطة
, تصبح الشيفرة كما يلي :
< MAP NAME = "ourmap" >
< AREA SHAPE = "poly" >
< AREA SHAPE = " recet" >
< AREA SHAPE = "circle" >
< AREA SHAPE = "poly" >
< /MAP >
أما الآن لنحدد موقع كل شكل على الخريطة ولذلك نستخدم
البارامتر :
www.tartoos.com
COORDS
:
ويأخذ
هذا البارامتر قيمة رقمية تمثل اٍحداثيات الشكل الهندسي بالبيكسل على الخريطة
, ففي الشكل الرباعي نحتاج لمعرفة اٍحداثيي الزاوية اليسرى والعليا والزاوية
اليمنى والسفلى ( أي نحتاج الى أربعة أرقام ) .
أما في الدائرة فكل ما نحتاجه هو اٍحداثيي نقطة المركز
لهذه الدائرة بالإضافة الى معرفة نصف قطرها .
أما في الأشكال المضلعة العشوائية نحتاج لمعرفة اٍحداثيي
كل نقطة من النقاط التي تمثل زوايا هذا الشكل مهما كان عددها .
والسؤال الأهم : كيف نستطيع اٍيجاد الإحداثيات ؟
هنا يأتي دور برنامج الغرافيكس , فكل ماعليك هو تحميل
الصورة الى هذا البرنامج ثم وضع المؤشر في المكان المطلوب وسوف تشاهد
اٍحداثيات النقطة التي يقع عليها المؤشر على الشريط الموجود أسفل نافذة
البرنامج . بالإضافة الى ذلك نستطيع معرفة أبعاد الصورة ككل .
اٍذاً يجب أن تسجل اٍحداثيات جميع النقاط المطلوبة قبل
استخدامها في الخريطة .
مثلاً : اٍحداثيات النقطة العليا للمستطيل هي (
30 – 400
) والنقطة السفلى هي (
320 -
360 )
أما اٍحداثيات نقطة مركز الدائرة هي (
150 , 200 )
ونصف قطرها
150
بيكسل .
أما الشكل المضلع ( المثلث ) اٍحداثيات زواياه الثلاثة هي (
120 – 15
) (250- 30
) ( 300 – 230
)
أما اٍحداثيات الشكل الرباعي ( لديه أربع نقاط ) (
10 , 15
) ( 30 , 15
) (
115 , 70 )
( 40 , 20
)
ولنكتب الشيفرة الموافقة لذلك :
www.tartoos.com
ملاحظة : لا أهمية للترتيب في ذكر هذه النقاط ,
المهم أن تكون الإحداثيات دقيقة .
< MAP NAME = "ourmap" >
<
AREA SHAPE = "poly" COORDS = "40 , 20 , 115 , 70 , 30 , 25 , 10 , 15" >
< AREA SHAPE = "rect" COORDS = "320 , 360 , 30, 400 "
>
< AREA SHAPE = "circle" COORDS = "150 , 200 , 150"
>
< AREA SHAPE = "poly" COORDS = "300 , 230 , 250 , 30 ,
120 , 15" >
< /MAP >
أما الآن بقي تعيين العناوين التي ستشير اليها الوصلات
التشعبية والتي سنستخدم لها الخاصية ( البارامتر )
HREF
, وهذه أربعة من المواقع العربية الممتازة :
< MAPE NAME = "ourmap" >
< AREA SHAPE = "poly" COORDS = "40 , 20 , 115 , 70 , 30 ,
25 , 10 , 15" >
HREF = "http://www.sakhr.com"
>
< AREA SHAPE = "rect" COORDS = "320 , 360 , 30 , 400" >
HREF =" http://www.ayna.com"
>
< AREA SHAPE = "circle" COORDS = "150 , 200 , 150" >
HREF =
"http://www.pcmag-arabic.com">
< AREA SHAPE = "poly" COORDS = "300, 230 , 250 , 30 , 120
, 15" >
HREF = "http://www.asp.com.lb">
< /MAP >
وبتجميع الشيفرة الخاصة باٍدراج الصورة مع هذه الشيفرة
نحصل على النتيجة النهائية لشيفرة الخريطة ككل . ( يمكننا وضع تعريف الخريطة
في أي مكان نريده داخل الملف وليس شرطاً أن يكون قريباً من شيفرة اٍدراج
الصورة ) .
ملاحظات هامة :
www.tartoos.com
1-
لو
أردنا ادراج هذه الخريطة أكثر من مرة في الصفحة فهل نحتاج الى تكرار كتابة
الشيفرة
< MAP > ….< /MAP >
في كل مرة ؟ طبعاً لا ! فطالما أننا نكتب البارامتر
USEMAP
فاٍن المتصفح يقوم بالبحث عن شيفرة الخريطة التي حددنا اسمها مع هذا
البارامتر , ومن ثم يطبقها على الصورة المعطاة مهما كان عدد مرات ادراجها .
2-
ماذا لو قررنا اٍلغاء هذه الصورة ووضع صورة أخرى مكانها . هل من مشكلة ؟
طبعاً لايوجد مشكلة , لأن تعريف الخريطة بطبيعته غير مرتبط
بصورة محددة بالشكل والموقع . لذلك لانجد في التعريف مايشير الى أن الصورة
مرتبطة بالخريطة , حتى ولو أدرجت صورة أكبر من اللازم أو أصغر من اللازم
واستخدمت خاصية USEMAP
معهما لتشير الى الخريطة , فلن تواجه أي مشكلة مع ذلك ولكن قد تخسر بعض
الوصلات التشعبية المعرّفة في الخريطة صغيرة الحجم ( الصورة صغيرة الحجم )
لأنها قد لاتحتوي على بعض الوصلات المعرّفة في الخريطة .
وكذلك ستربح مناطق اٍضافية في حالة كانت الصورة كبيرة
ولكن بدون وصلات تشعبية .
3-
اٍن تعريف الخريطة هو تعريف مشاع يوضع مرة واحدة فقط وفي أي
مكان داخل الصفحة وبشرط أن يكون ضمن
< BODY >….</BODY >
وبالمقابل نستطيع اٍدراج عشرات الصور مهما كانت طبيعتها داخل الصفحة لتكون
خرائط صورية تستخدم نفس تعريف هذه الخريطة طالما أننا وضعنا البارامتر
USEMAP = "#map name"
مع هذه الصور .
www.tartoos.com
4- يوجد على الانترنت الكثير من البرامج التي
تقوم بتصميم الخرائط الصورية بسرعة وسهولة . فقط تقوم بتحميل الصورة المطلوبة
ثم ترسم الأشكال التي تريدها عليها كما لو كنت تستخدم الرسام . ومن ثم تكتب
عناوين الوصلات التشعبية المطلوبة لكل من هذه الأشكال , فيقوم البرنامج
ببساطة باٍيجاد الإحداثيات الخاصة لكل شكل وانشاء شيفرة الخريطة الخاصة
المطلوبة
.
|
