Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

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;
}