انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #8 من درس: خرائط الصور في لغة HTML

?How Are the Coordinates of the Polygon Calculated كيف يتم حساب إحداثيات المضلع؟

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

1 صفوف تعليمية
لغة HTML
9,826 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
لإنشاء شكل مضلع، نختار القيمة [poly] داخل الخاصية [shape]. هذه القيمة تتكون من عدة إحداثيات، وتُستخدم لتكوين أشكال مكونة من خطوط مستقيمة، مما يسمح بتمثيل أشكال متعددة. نحدد جميع نقاط أضلاع الشكل في الخاصية [coords].

في مثال الكرواسون، نقوم بتحديد إحداثيات عدة نقاط حول حافته من زوايا مختلفة. كل نقطة تتكون من زوج من الإحداثيات، حيث يمثل الرقم الأول إحداثي المحور الأفقي [x] والرقم الثاني إحداثي المحور الرأسي [y]. بذلك نقوم بربط تلك النقاط ببعضها البعض لتحديد الشكل المطلوب.
كيف يتم حساب إحداثيات المضلع؟

Polygon Shape Usage in Image Maps

احتساب قيمة x و y لنقاط الصورة باستخدام الشكل المضلع متعدد الأضلاع.

HTML 
<img src="/images/frenchfood4.jpg" alt="French Food" usemap="#image-map">

<map name="image-map">
  <area  target="_blank" alt="Croissant" title="croissant" href="/images/croissant2jpg.jpg"
  coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147"  shape="poly">
</map>
جرّب بنفسك

جميع فقرات هذا الدرس (خرائط الصور في لغة HTML)