<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;
}
جميع الحقوق محفوظة لموقع هرمش. لا يسمح باستخدام الشروحات لأغراض تجارية، إجراء تعديل عليها، نشرها في موقع آخر، وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع كما أن المحتوى مسجل بواسطة DMCA و في حال قيامك بمخالفة حقوق النشر سنضطر آسفين لاتخاذ الإجراءات اللازمة.
