كيفية تراكب إحداثيات X و Y على صورة باستخدام JavaScript

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

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

يمكنك تحقيق هذا التأثير باستخدام HTML و CSS و JavaScript باستخدام تقنيات CSS معينة ومفاهيم JavaScript DOM.

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

يمكنك إضافة تلميح أداة على صورة بتنسيق HTML باستخدام CSS و JavaScript.

الكود المستخدم في هذا المشروع متوفر في هذا جيثب ريبو بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

1. في ملف جديد يسمى index.html ، أضف البنية الأساسية لملف HTML:

   لغة البرمجة>
   <لغة البرمجة>
   <رأس>
   <عنوان>مثال تلميح أداة الصورةعنوان>
   رأس>
   <جسم>
   جسم>
   لغة البرمجة>

instagram viewer
2. داخل علامة الجسم ، أضف حاوية div. سيتضمن عنصر div هذا كلاً من الصورة وعناصر تلميح الأداة:

   <شعبةفصل="حاوية">
   شعبة>

3. داخل الحاوية ، أضف صورة. تأكد من وجود صورة ذات اسم ملف مطابق داخل نفس المجلد مثل ملف HTML الخاص بك:

   <IMGsrc="image.jpg"فصل="صورة"ارتفاع="420"عرض="840"بديل="صورتك">

4. أسفل الصورة ، أضف div لتمثيل تلميح الأداة:

   <شعبةفصل="تلميح">شعبة>

5. في علامة الرأس ، أضف علامة نمط. داخل علامة النمط ، أضف بعض الأنماط لحاوية الصورة وتلميح الأداة:

   <أسلوب>
   .حاوية {
   موضع: نسبي;
   عرض: مضمنة كتلة;
    }
   
   .تلميح {
   موضع: مطلق;
   غادر: 0;
   عرض: لا أحد;
   حشوة: 5مقصف;
   لون الخلفية: #000;
   لون: #fff;
   حجم الخط: 12مقصف;
    }
   أسلوب>

6. أنشئ علامة نصية جديدة في الجزء السفلي من علامة النص الأساسي:

   <جسم>
    محتوى صفحة الويب الخاصة بك هنا 
   <النصي>
   النصي>
   جسم>

7. داخل علامة البرنامج النصي ، استخدم محدد DOM دالة ، querySelector ، للحصول على عناصر HTML للصورة وتلميح الأداة:

   مقدار ثابت الصورة = وثيقة.querySelector ('.صورة');
   مقدار ثابت تلميح = وثيقة.querySelector ('.تلميح');

8. إضافة مستمع حدث لـ تمرير الماوس حدث. سيتم تشغيل هذه الوظيفة عند تحريك الماوس فوق الصورة. عند حدوث ذلك ، سيتم عرض تلميح الأداة على الشاشة:

   image.addEventListener ("تمرير الماوس", () => {
    tooltip.style.display = 'حاجز';
   });

9. إضافة مستمع حدث لـ تجاوز الماوس حدث. سيتم تشغيل هذه الوظيفة عندما يترك الماوس الصورة. عند حدوث ذلك ، سيختفي التلميح عن الشاشة:

   image.addEventListener ("تجاوز الماوس", () => {
    tooltip.style.display = 'لا أحد';
   });

10. افتح ملف index.html في أي متصفح ، وقم بالمرور فوق الصورة لعرض تلميح الأداة:

كيفية حساب وعرض إحداثيات X و Y للصورة

الآن بعد أن أصبح التلميح مرئيًا على الصفحة ، قم بتغيير موضعه ونصه لعرض إحداثيات X و Y للماوس.

1. قم بتغيير نمط CSS لتلميح الأداة ، بحيث لا يكون التلميح مرئيًا قبل التمرير فوق الصورة. يمنعك هذا من رؤية تلميح الأداة أسفل الصورة قبل القفز إلى موقع المؤشر:

   .تلميح {
   موضع: مطلق;
   قمة: -30 بكسل;
   غادر: 0;
   عرض: لا أحد;
   حشوة: 5مقصف;
   لون الخلفية: #000;
   لون: #fff;
   حجم الخط: 12مقصف;
   }

2. داخل علامة البرنامج النصي ، أضف مستمع حدث آخر ، للاستماع إلى ملف تحرك الماوس حدث. سيتم تنفيذ هذه الوظيفة بشكل مستمر في كل مرة يحوم فيها الماوس فوق بكسل جديد. أضف معلمة الحدث ، والتي ستدخل معلومات حول ملف تحرك الماوس حدث في الوظيفة. تتضمن هذه المعلومات إحداثيات الصورة حيث يوجد الماوس في تلك المرحلة:

   image.addEventListener ('تحرك الماوس'، (هـ) => {
   });

3. باستخدام الحدث ، قم بتغيير الوضع الأفقي لتلميح الأدوات باستخدام خاصية CSS اليسرى. في كل مرة يتحرك فيها الماوس ، سيؤدي هذا إلى تحديث القيمة لمطابقة إحداثيات X للمؤشر المخزنة في ملف العميل عامل:

   tooltip.style.left = e.clientX + "مقصف";

4. قم بتغيير الوضع الرأسي لتلميح الأدوات باستخدام خاصية CSS العلوية. العميل يمثل إحداثيات y للماوس. ال الارتفاع تتضمن الخاصية أي حشوة أو حدود إضافية داخل تلميح الأداة. نظرًا لأنك لا تريد تلميح الأداة مباشرةً حيث يوجد المؤشر ، يمكنك إزالة 10 بكسل إضافية من الموضع:

   tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + "مقصف";

5. قم بتغيير محتوى نص تلميح الأداة لعرض الإحداثيات:

   tooltip.textContent = X: $ {e.offsetX}، ص: $ {e.offsetY}`;

6. افتح ملف index.html في أي متصفح ، وقم بالمرور فوق الصورة لعرض تلميح الأداة المحدث:

إضافة تأثيرات إلى صفحة الويب التفاعلية الخاصة بك

أنت الآن تفهم كيفية إضافة تلميح أداة تفاعلي على صورة على صفحة الويب الخاصة بك. يمكنك الاستمرار في تطوير مهاراتك في HTML و CSS من خلال تجربة تأثيرات HTML الأخرى المثيرة للاهتمام.