انتقل إلى محتوى الدرس

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

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

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

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

الصف 1 شرح توضيحي

طريقة احتساب إحداثيات المناطق أو الأشكال المستطيلة على الصور:

تأتي إحداثيات الشكل [rect] في أزواج لكل محور؛ أحدها للمحور [x] والآخر للمحور [y]. بالنسبة للخاصية [shape] من النوع [rect]، يتم استخدام أربع قيم.

  • أول قيمتين [74,165]: هما لمحور x و y، وتمثلان البعد من بداية العنصر من جهة اليسار ومن أعلى الصورة.

  • آخر قيمتين [446,584]: هما لمحور x و y، وتمثلان البعد إلى نهاية العنصر من جهة اليسار ومن أعلى الصورة.

لتصبح في النهاية بالشكل: ["coords="74,165,446,584].

كيف يتم حساب إحداثيات المستطيل؟

Rect Shape

احتساب قيمة x وقيمة y للمناطق أو الأشكال المستطيلة.

HTML
<img src="https://www.closetag.com/images/place.jpg" alt="myplace" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="mac" title="mac" href="https://www.closetag.com/images/mac.jpg" coords="74,165,446,584" shape="rect">
</map>