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

?How Are the Coordinates of the Circle Calculated كيف يتم حساب إحداثيات الدائرة؟

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

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

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

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

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

يتم احتساب الشكل الدائري عن طريق تحديد نقطة مركز الدائرة أولاً، ثم تحديد نصف قطر الدائرة.

سيكون موقع نقطة مركز الدائرة في هذا المثال:

  • على بعد [554 px] من الجانب الأيسر للصورة.

  • على بعد [288 px] من الجانب العلوي للصورة.

  • تكون قيمة نصف قطر الدائرة [90 px].


الأرقام 74,165 و446,584 الظاهرة في الرسم هي إحداثيات المستطيل في المثال السابق، وليست إحداثيات الدائرة. الدائرة الحالية تستخدم coords="554,288,90"؛ أي مركزًا عند 554,288 ونصف قطر 90.

كيف يتم حساب إحداثيات الدائرة؟

Circle 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="coffee" title="coffee" href="https://www.closetag.com/images/coffeehouse2.jpg" coords="554,288,90" shape="circle">
</map>