القائمة الرئيسية

الصفحات

تعديل المشاركة

كيفية استخدام تقنية JavaScript لوضع "إحداثيات X-Y" على صورة

How to use،X and Y Coordinates on Image Using JavaScript،How to use X and Y Coordinates on Image Using JavaScript،How to Overlay X and Y Coordinates،Image، JavaScript،How to use JavaScript technology to put "X-Y coordinates" on an image،كيفية استخدام تقنية JavaScript لوضع "إحداثيات X-Y" على صورة،استخدام تقنية JavaScript لوضع إحداثيات (X و Y) على صورة،كيفية استخدام تقنية JavaScript لوضع "إحداثيات X-Y،كيفية كتابة باستخدام JavaScript،How to Overlay X and Y Coordinates on an Image Using JavaScript،كيفية تراكب إحداثيات X و Y على صورة باستخدام JavaScript،





كيفية استخدام تقنية JavaScript لوضع "إحداثيات X-Y" على صورة



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

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


كيفية إضافة تلميح أداة على الصورة في ملف HTML



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

** الكود المستخدم في هذا المشروع متاح في GitHub repo .**

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

<!DOCTYPE html>
<html>
  <head>
    <title>Image Tooltip Example</title>
  </head>
  <body>

  </body>
</html>

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

<div class="container">
</div>

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

<img src="image.jpg" class="image" height="420" width="840" alt="Your Image">

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

<div class="tooltip"></div>

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

<style>
  .container {
    position: relative;
    display: inline-block;
  }
  .tooltip {
   position: absolute;
   left: 0;
   display: none;
   padding: 5px;
   background-color: #000;
   color: #fff;
   font-size: 12px;
 }
</style>









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

<body>
  <!-- Your webpage content here -->

  <script>

  </script>
</body>

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

const image = document.querySelector('.image');
const tooltip = document.querySelector('.tooltip');

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

image.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

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

image.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

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


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


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

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

.tooltip {
  position: absolute;
  top: -30px;
  left: 0;
  display: none;
  padding: 5px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
}

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

image.addEventListener('mousemove', (e) => {
});

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

tooltip.style.left = e.clientX + 'px';

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

tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';

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

tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;

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


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


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




أخر المواضيع من قسم : التكنولوجيا

جدول المحتويات