HTMLالوسم <area>

تعريفه

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

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

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

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

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية alt

نضيفها للوسم لوضع نص بديل يظهر مكانه في حال لم يستطع المتصفح فتح الصورة نفسها.

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

الخاصية coords

نضيفها للوسم لتحديد موقع المساحة المشار إليها في الصورة و كم هو حجمها على النحو التالي:

• إذا كان شكل المساحة المشار إليه في الصورة محدد كمستطيل (shape="rect") يجب تمرير 4 أعداد لها مع وضع فاصلة بين كل عددين هكذا x1,y1,x2,y2 لأن أول عددين يمثلان مكان أول نقطة و ثاني عددين يمثلاً مكان ثاني نقطة و على أساس هاتين النقطتين سيقوم المتصفح بإنشاء خطوط متعامدة في مكان إلتقائها مما ينتج شكل المستطيل.
• إذا كان شكل المساحة المشار إليه في الصورة محدد كدائرة (shape="circle") يجب تمرير 3 أعداد لها مع وضع فاصلة بين كل عددين هكذا x,y,radius لأن أول عددين سيمثلان مركز الدائرة و العدد الثالث يمثل كم طول الشعاع (أي حجمها).
• إذا كان شكل المساحة المشار إليه في الصورة محدد كمُضَلَّع (shape="poly") يمكنك تمرير العدد الذي تريده من النقاط هكذا x1,y1,x2,y2,..,xn,yn حيث كل عددين تمررهما وراء بعض يشيران لمكان نقطة واحدة في الشكل الذي سيتم تكوينه من النقاط. و في حال كانت آخر نقطة وضعتها لا تساوي أول نقطة وضعتها سيقوم المتصفح بفعل ذلك عنك حتى يقوم بإغلاق الشكل الذي حددته.

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

الخاصية download

يمكن إضافتها للوسم لإعلام المتصفح أنه عند النقر على المكان الذي يشير له الوسم في الصورة سيتم تحميل ملف ما.

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

الخاصية href

نضيفها للوسم لتحديد الرابط الذي سيتم توجيه المستخدم إليه عند النقر على الرابط الموضوع في المساحة، و بشكل عام يجب وضع هذه الخاصية في كل وسم <area> لكي يعتبر المتصفح أن المساحة المشار إليها في الصورة يمكن النقر عليها كأي رابط و لكي تعمل الخصائص الأخرى التي يمكن إضافتها في الوسوم.

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

الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد معلومات المرسل التي سيتم إرسالها مع طلب المستخدم إلى الموقع الذي سيتلقى طلبه.

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

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

الخاصية rel

يمكن إضافتها للوسم بهدف تحديد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه و هذا الأمر مهم جداً بالنسبة لمحركات البحث.

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

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحدد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه.

الخاصية shape

يمكن إضافتها للوسم بهدف تحديد شكل المساحة التي سيمثلها على الصورة و جعلها قابلة للنقر.

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

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية shape لتحدد كيف سيكون شكل المساحة التي يمكن النقر عليها على خريطة الصورة.

الخاصية target

نضيفها للوسم لتحديد أين سيتم فتح الرابط.

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

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية target لتحدد أين سيتم فتح الرابط الذي يتم توجيه المستخدم إليه.

إستخدامه

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

المثال الأول

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

جرب الكود

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

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

area {
    display: none;
}