HTML الوسم <area>

تعريفه

الصورة التي نعرضها في الصفحة بواسطة الوسم <img> يمكن إضافة خريطة لها بواسطة الوسم <map> بهدف جعل المستخدم قادر على النقر على أجزاء الصورة و كأنها روابط عادية. فمثلاً إذا كانت الصورة تعرض خريطة العالم يمكنك جعل كل بلد في الصورة يمكن النقر عليه للتوجه لصفحة تعرض مزيد من المعلومات عنه.

نستخدم الوسم <area> بداخل خريطة الصورة لتحديد شكل و مكان جزء فيها نريد جعله قابل للنقرة و كأنه رابط.
طبعاً تستطيع وضع عدة وسوم <area> في الخريطة و غالباً ما ستفعل ذلك لتحديد عدة أجزاء في الصورة.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <area>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية alt

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


الخاصية coords

نضيفها للوسم لتحديد موقع المساحة المشار إليها في الصورة و كم هو حجمها على النحو التالي:

  • إذا كان شكل المساحة المشار إليه في الصورة محدد كمستطيل (shape="rect") يجب تمرير 4 أعداد لها مع وضع فاصلة بين كل عددين هكذا x1,y1,x2,y2 لأن أول عددين يمثلان مكان أول نقطة و ثاني عددين يمثلاً مكان ثاني نقطة و على أساس هاتين النقطتين سيقوم المتصفح بإنشاء خطوط متعامدة في مكان إلتقائها مما ينتج شكل المستطيل.
  • إذا كان شكل المساحة المشار إليه في الصورة محدد كدائرة (shape="circle") يجب تمرير 3 أعداد لها مع وضع فاصلة بين كل عددين هكذا x,y,radius لأن أول عددين سيمثلان مركز الدائرة و العدد الثالث يمثل كم طول الشعاع (أي حجمها).
  • إذا كان شكل المساحة المشار إليه في الصورة محدد كمُضَلَّع (shape="poly") يمكنك تمرير العدد الذي تريده من النقاط هكذا x1,y1,x2,y2,..,xn,yn حيث كل عددين تمررهما وراء بعض يشيران لمكان نقطة واحدة في الشكل الذي سيتم تكوينه من النقاط. و في حال كانت آخر نقطة وضعتها لا تساوي أول نقطة وضعتها سيقوم المتصفح بفعل ذلك عنك حتى يقوم بإغلاق الشكل الذي حددته.

ملاحظة: جميع الأرقام التي تمررها للخاصية coords تمثل أرقام موضوعة بالبكسل ( Pixel ) لهذا حجم الصورة الأساسية يجب أن يكون ثابت و محدد بالبكسل أيضاً حتى تتطابق الأجزاء المحددة في الصورة مع حجم الصورة نفسها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


الخاصية download

يمكن إضافتها للوسم لإعلام المتصفح أنه عند النقر على المكان الذي يشير له الوسم في الصورة سيتم تحميل ملف ما.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


الخاصية href

نضيفها للوسم لتحديد الرابط الذي سيتم توجيه المستخدم إليه عند النقر على الرابط الموضوع في المساحة, و بشكل عام يجب وضع هذه الخاصية في كل وسم <area> لكي يعتبر المتصفح أن المساحة المشار إليها في الصورة يمكن النقر عليها كأي رابط و لكي تعمل الخصائص الأخرى التي يمكن إضافتها في الوسوم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم


الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد معلومات المرسل التي سيتم إرسالها مع طلب المستخدم إلى الموقع الذي سيتلقى طلبه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
51 50 غير مدعوم 38 11.1 51 51 50 41 غير مدعوم 7.2

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

القيمة معناها
no-referrer لعدم إرسال أي معلومة مع طلب المستخدم.
no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب المستخدم ( أي المعلومات التي يرسلها المستخدم للموقع و لا تظهر في الرابط ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
origin لإرسال المعلومات التالية فقط مع طلب المستخدم ( scheme - host - port ).
origin-when-cross-origin لإرسال المعلومات التالية مع طلب المستخدم ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع.
unsafe-url لإرسال المعلومات التالية فقط مع طلب المستخدم ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره.


الخاصية rel

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحدد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه.

القيمة معناها
alternate للإشارة إلى أن الرابط الموضوع هو رابط بديل للرابط الحالي في حال كان هذا البديل أفضل و يلائم باقي الخصائص الموضوعة.
author للإشارة إلى أن الرابط الموضوع هو لصفحة تصف مؤلف المحتوى أو توفر طريقة للتواصل معه.
bookmark للإشارة إلى أن الرابط الموضوع دائم و يمكن الرجوع له.
external للإشارة إلى أن الرابط الموضوع ليس تابعاً للموقع الموجودة فيه الصفحة.
help للإشارة إلى أن الرابط الموضوع يقدم مساعدة.
license للإشارة إلى أن الرابط الموضوع يوضح رخصة المحتوى المعروض في الصفحة.
next للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
nofollow للإشارة إلى أن الرابط الموضوع ليس مكملاً للموقع و بالتالي لا يعتبر جزء منه, و بشكل عام إذا كنت تستخدم إعلانات أدسينس فشركة جوجل تفرض إضافة هذا القيمة لكل رابط دعائي موضوع في الموقع حتى لا يتعارض مع سياسة الإعلانات الموضوعة من قبل أدسينس.
noreferrer لمنع المتصفح من إرسال أي معلومات مع طلب المستخدم مما يعني أن المستخدم سيكون مجهول بالنسبة للموقع الذي يتم نقله إليه حين ينقر على الرابط.
noopener لمنع النافذة التي تم فتحها في المتصفح بواسطة الكود window.open() عند النقر على الرابط من إمكانية تنفيذ أي كود جافا سكربت ضار من شأنه الوصول لمعلومات المستخدم الحساسة التي كان قد أدخلها في الصفحة السابقة.
prev للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
search لإظهار زر للبحث مبني على نتائج بحث سابقة تم إجراؤها بواسطة المتصفح.
لا ننصح بهذا الأمر لأنه يتطلب ذكر معلومات خاصة تساعد في البحث في كل صفحة يتم إنشاؤها في الموقع حتى ينجح ذلك بالإضافة إلى أن المستخدم في العادة يفضل أن يستخدم مربع بحث عادي موجود في الموقع أو يستخدم بحث جوجل.
tag يستخدم للإشارة إلى أن محتوى الرابط الموضوع ينتمي لنفس نوع المحتوى الموجود في الصفحة.


الخاصية shape

يمكن إضافتها للوسم بهدف تحديد شكل المساحة التي سيمثلها على الصورة و جعلها قابلة للنقر.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية shape لتحدد كيف سيكون شكل المساحة التي يمكن النقر عليها على خريطة الصورة.

القيمة معناها
rect لتحديد أن المساحة المشار إليها في الصورة مستطيلة الشكل.
عند اعتماد هذا الشكل سيكون عليك تحديد مكان النقاط الأربعة.
circle لتحديد أن المساحة المشار إليها في الصورة متسديرة الشكل.
عند اعتماد هذا الشكل سيكون عليك تحديد مكان مركز الدائرة و طول شعاعها.
poly لتحديد أن المساحة المشار إليها في الصورة ليس لها شكل محدد.
هنا سيكون عليك تحديد مكان كل نقطة في هذا الشكل.
default بعد تحديد جميع أجزاء الصورة يمكنك إنشاء وسم و إعطاؤه هذه القيمة للإشارة إلى كل الأجزاء المتبقية من الصورة.


الخاصية target

نضيفها للوسم لتحديد أين سيتم فتح الرابط.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية target لتحدد أين سيتم فتح الرابط الذي يتم توجيه المستخدم إليه.

القيمة معناها
_self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
_blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.
_top في حال أردت يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.
_parent في حال أردت يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.

إستخدامه

في المثال التالي قمنا بإضافة صورة مع ربطها بخريطة.
ملاحظة: الأجزاء المعلمة باللون الأخضر في الصورة هي الأجزاء التي يمكن للمستخدم النقر عليها.

المثال الأول


<!-- "demomap" مع تحديد أنها تستخدم خريطة إسمها <img> هنا قمنا بإضافة صورة بواسطة الوسم -->
<img src="solar-system.jpg"
	width="254" height="254" alt="Solar System" usemap="#demomap">

<!-- التي تستخدمها الصورة "demomap" هنا قمنا بتعريف الخريطة -->
<map name="demomap">
	
	<area shape="circle" coords="0,127,63" alt="Sun" href="sun.html">
	<area shape="circle" coords="91,132,9" alt="Mercury" href="mercury.html">
	<area shape="circle" coords="128,132,20" alt="Venus" href="venus.html">
	<area shape="circle" coords="176,132,23" alt="Earth" href="earth.html">
	<area shape="circle" coords="226,135,17" alt="Mars" href="mars.html">
</map>
		

جرب الكود



في المثال التالي قمنا بإضافة مساحة لكل شكل ظاهر في الصورة بالإضافة إلى جعل الخلفية نفسها قابلة للنقر.
ملاحظة: هنا الصورة كلها يمكن النقر عليها و لكن على حسب المساحة التي تنقر عليها يتم فتح الرابط المناسب.

المثال الثاني


<!-- "demomap" مع تحديد أنها تستخدم خريطة إسمها <img> هنا قمنا بإضافة صورة بواسطة الوسم -->
<img src="shapes.PNG"
	width="247" height="88" alt="Shapes" usemap="#demomap">

<!-- التي تستخدمها الصورة "demomap" هنا قمنا بتعريف الخريطة -->
<map name="demomap">
	<!-- الوسم التالي يشير لمكان المربع في الصورة -->
	<area shape="rect" coords="65,70,16,20" alt="Rectangle" href="rectangle.html">
	<!-- الوسم التالي يشير لمكان المثلث في الصورة -->
	<area shape="poly" coords="97,72,151,72,123,19" alt="Triangle" href="triangle.html">
	<!-- الوسم التالي يشير لمكان الدائرة في الصورة -->
	<area shape="circle" coords="204,46,28" alt="Circle" href="circle.html">
	<!-- الوسم التالي يشير لمكان الأجزاء المتبقية في الصورة -->
	<area shape="default" href="background.html">
</map>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

area {
	display: none;
}
	

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة