HTML الوسم <map>

تعريفه

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

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

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

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

خصائصه

الخاصية name

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

ملاحظة: الإسم الذي تضعه يجب أن لا يحتوي على أي مسافات فارغة أو أن يكون مستخدم من قبل في الصفحة, و في حال أردت وضع id و name للوسم فيجب إعطاؤهما نفس القيمة.

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

إستخدامه

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

المثال الأول

<!-- "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>
		

جرب الكود

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

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

map {
	display: inline;
}