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> كل وسم -->

<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="solar-system.jpg" width="254" height="254" alt="Solar System" usemap="#demomap"> <!-- التي تستخدمها الصورة "demomap" هنا قمنا بتعريف الخريطة --> <map name="demomap"> <!-- موضوع في هذه الخريطة يشير لمكان وجود كوكب من الكواكب الظاهرة في الصورة <area> كل وسم --> <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>

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

جرب الكود

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

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