إعلان
تعلم الآن

HTML الوسم <map>

تعريفه

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

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

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

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

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

خصائصه

الخاصية name

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

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

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

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

إستخدامه

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

المثال الأول


<!-- "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;
}
	
إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

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