|
(7) الدرس السابع: الخرائط الصورية image maps
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله الدرس السابع الخرائط الصورية image maps وهو من المواضيع المتقدمة نوعاً ما في لغة html. عرفنا من خلال درس الوصلات التشعبية، أننا نستطيع إدراج صورة لتمثل وصلة تشعبية ما. الخرائط الصورية : عبارة عن صورة واحدة تحتوي على العديد من هذه الوصلات التي تقوم بإيصالنا إلى مواقع مختلفة!!؟ في هذا الدرس سنتعرف على الوسوم الجديدة الخاصة بهذه الخرائط. سوف نعود أيضاً للتعامل مع وسوم الصور (بما أننا نتحدث عن خرائط صورية) كذلك سنتعامل مع الوصلات التشعبية (كون الخرائط الصورية هي تطبيق آخر للوصلات) وأخيراً نحتاج إلى أحد برامج تحرير الصور مثل: paint (في ويندوز) لاستخدامه في معرفة بعض التفاصيل الخاصة بالصور. سنعمل على هذه الصورة لتكون خريطتنا الصورية الأولى. إن شاء الله. بسم الله وبه نستعين الخرائط الصورية : وسيلة تعليمية نافعة بإذن الله ، بحيث يكتفى باستخدام الصور أو الخرائط وبعض الجمل البسيطة أوالملفات الصوتية ، وهناك أمثلة عديدة لاستخدامها - الخرائط الجغرافية أو الجوية (الطقس) وغيرها - وأيضا الخرائط والصور الخاصة بالحج . أما بالنسبة للإستخدام في صفحات الويب: - شريط التنقل (الوصلات) وهناك استخدامات أخرى. وهذه هي الشيفرة الخاصة بإدراجها كود بلغة HTML:
<img src=" map-0.jpg" border="0">والآن سنتعرف على خصائص جديدة من خصائص الوسم < img> : usemap="#map_name" : خاصية إخبار المتصفح أن يستخدم هذه الصورة كخريطة. أما القيمة map_name فهي تمثل الاسم الذي نريد أن نعيّنه للخريطة. وكما ترى فإن هذا الاسم مسبوق بإشارة #. الخطوة الأولى أن نسمي الخريطة باسم ourmap عندها سوف تصبح الشيفرة كما يلي: كود بلغة HTML:
<img src="map-0.jpg" border="0" usemap="#ourmap">ثم ننتقل لتحديد التفاصيل. سنقوم بإخبار المتصفح أننا نريد خريطة تحمل الإسم ourmap <map name="ourmap"> ... </map> ونلاحظ عدم استخدام إشارة # مع التسمية هنا. الخطوة التالية تحديد المناطق الساخنة أو الفعالة hotspots للوصلات التشعبية، ولنفترض أننا نريدها بالشكل التالي: (هذا مثال للتوضيح ويمكن أن تُحدد مناطق أخرى وأشكال أخرى مغايرة). كيف نحدد هذه المناطق باستخدام html وكيف يمكن للمتصفح أن يميزها دون غيرها؟ الجواب هو استخدام الوسم < area> والذي يدرج ضمن الوسم < img> وبنفس عدد المناطق الفعالة التي نريدها. إذن: 1- تحديد عدد المناطق الفعالة. كود بلغة HTML:
<map name="ourmap">وذلك باستخدام خصائص الوسم < area> : الخاصية الأولى : shape لتحديد شكل كل منطقة . الخاصية الثانية: coords لتحديد موقع كل منطقة. الخاصية الثالثة: href لأن كل منطقة تمثل وصلة تشعبية وتشير إلى عنوان موقع ما . وقد مرت معنا في درس سابق. تأخذ الخاصية shape ثلاثة قيم لتحديد شكل المنطقة الفعالة وهي: rect للأشكال المربعة والمستطيلة المنتظمة circle للدوائر poly للأشكال العشوائية والمضلعة ولدينا ثلاثة مستطيلات وثلاثة أشكال مضلعة: كود بلغة HTML:
<map name="ourmap">أما الخاصية coords والتي سنستخدمها إن شاء الله ، لتحديد مواقع الأشكال السابقة، فإنها تأخذ قيماً رقمية تمثل إحداثيات الشكل الهندسي بالبيكسل على الخريطة طبعا ... (أربعة أرقام) في الشكل الرباعي المنتظم نحتاج لمعرفة إحداثيي الزاوية اليسرى العليا وإحداثيي الزاوية اليمنى السفلى. http://www.afaqattaiseer.com/vb/uplo...1346193359.jpg أما في الدائرة فكل ما نحتاجه هو إحداثيي نقطة المركز لهذه الدائرة بالإضافة إلى معرفة نصف قطرها. (ثلاثة أرقام فقط) http://www.afaqattaiseer.com/vb/uplo...1346193359.jpg وأخيراً في الأشكال المضلعة العشوائية نحتاج لمعرفة إحداثيي كل نقطة من النقاط التي تمثل زوايا هذا الشكل مهما كان عددها. (عدد الأرقام يختلف بإختلاف الشكل المقصود) http://www.afaqattaiseer.com/vb/uplo...1346193359.jpg كيف نستطيع إيجاد هذه الإحداثيات؟ هنا يأتي دور برنامج تحرير الصور ، واخترنا برنامج paint ؛ الذي يوفره نظام ويندوز. بعد تحميل الصور في هذا البرنامج نضع المؤشر في المكان المطلوب وسوف تظهر إحداثيات النقطة التي يقع عليها المؤشر على الشريط الموجود أسفل نافذة البرنامج. نسجل إحداثيات جميع النقاط المطلوبة من أجل استخدامها في تعريف الخريطة. مع التنبيه على أهمية أن تكون الإحداثيات دقيقة إلى حد ما. ولنعد الآن إلى خريطتنا. نبدأ من منطقة حديث رسول الله صلى الله عليه وسلم: الشكل المستطيل (1): إحداثيات النقطة العليا هي: (6, 9) وإحداثيات النقطة السفلى هي (315, 352). ثم منطقة "فضل طلب العلم" الشكل المستطيل (2): إحداثيات النقطة العليا هي: (345,13) وإحداثيات النقطة السفلى هي (774,100). ثم منطقة "albetaqa.com" الشكل المستطيل (3): إحداثيات النقطة العليا هي: (573,321) وإحداثيات النقطة السفلى هي (794,355). ثم منطقة "عقيدة" الشكل المضلع(الرباعي) (1): (542,174),(726,156),(544,216), (721,124). ثم منطقة "تفسير" الشكل المضلع(الرباعي) (2): (544,226),(721,169), (549,266), (723,200). ثم منطقة "فقه" الشكل المضلع(الرباعي) (3): (548,278), (727,208), (549,318), (730,245). لنقم الآن بكتابة هذه البيانات ضمن الشيفرة السابقة والتي ستصبح كما يلي: كود بلغة HTML:
<map name="ourmap">بقي تعيين العناوين التي ستشير إليها الوصلات التشعبية والتي سنستخدم لها الخاصية href. كود بلغة HTML:
<img src="map-0.jpg" border="0" width="800" height="360" alt="ourmap" usemap="#ourmap">فائدة: هذه مواقع خاصة بإنشاء مثل هذه الخرائط وفيها أمثلة على استخداماتها http://www.mobilefish.com/services/i.../image_map.php http://www.imapbuilder.net/ الطريقة السابقة أصعب لكن حتى نتعلم كيفية إنشاء مثل هذه الخرائط وما هي الوسوم الخاصة بها في html . وهذه الموقع نافعة بإذن الله عند الحاجة إلى إنشاء خرائط صورية في وقت يسير. الواجب التطبيقي (9) - عمل خريطة صورية. وفقكم الله ورزقكم العلم النافع والعمل الصالح الحمدلله سبحانك لا علم لنا إلا ما علمتنا إنك أنت العليم الحكيم اللهم صل وسلم على نبيك وسولك محمد وعلى آله وصحبهم ومن تبعهم بإحسان إلى يوم الدين |
| الساعة الآن 10:21 PM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd. TranZ By
Almuhajir