نحوه همپوشانی مختصات X و Y روی یک تصویر با استفاده از جاوا اسکریپت

این تکنیک جاوا اسکریپت را می توان برای بسیاری از افکت ها از جمله راهنمای ابزار و نقشه های تصویر استفاده کرد.

وب سایت های تعاملی می توانند تجربه جذاب تری را برای کاربران فراهم کنند. راه‌های زیادی وجود دارد که می‌توانید یک وب‌سایت را تعاملی‌تر کنید، مانند افزودن انیمیشن‌ها، نکات ابزار یا جلوه‌های اضافی دیگر.

برخی از وب سایت ها نیز زمانی که کاربر روی عنصری در صفحه قرار می گیرد، اطلاعاتی را نمایش می دهند. این شامل نقشه‌ها یا سایر داده‌های بصری است که به کاربر امکان می‌دهد با استفاده از یک راهنمای ابزار، ماوس را روی تصویر نگه دارد تا یک نقطه داده را مشاهده کند.

شما می توانید با استفاده از HTML، CSS و جاوا اسکریپت با استفاده از تکنیک های خاص CSS و مفاهیم جاوا اسکریپت DOM به این اثر برسید.

نحوه اضافه کردن یک راهنمای ابزار روی تصویر در یک فایل HTML

تصاویر می توانند راه مفیدی برای انتقال اطلاعات به شیوه ای بصری جذاب در یک صفحه وب باشند. آنها همچنین برای افزودن جلوه های جذاب دیگر مانند گالری تصاویر ساده مفید هستند.

می توانید با استفاده از CSS و جاوا اسکریپت، یک راهنمای ابزار را روی یک تصویر در HTML اضافه کنید.

کد مورد استفاده در این پروژه در این مخزن GitHub تحت مجوز MIT موجود است.

در یک فایل جدید به نام index.html، ساختار اصلی یک فایل HTML را اضافه کنید: نمونه راهنمای ابزار تصویر
داخل تگ بدنه، یک کانتینر div اضافه کنید. این بخش شامل تصویر و عناصر راهنمای ابزار خواهد بود:
در داخل ظرف، یک تصویر اضافه کنید. مطمئن شوید که یک تصویر با نام فایل منطبق در همان پوشه فایل HTML شما قرار دارد:
در زیر تصویر، یک div اضافه کنید تا راهنمایی ابزار را نشان دهد:
در تگ head، یک تگ سبک اضافه کنید. داخل تگ استایل، مقداری استایل برای محفظه تصویر و نکته ابزار اضافه کنید:
یک تگ اسکریپت جدید در پایین تگ بدنه ایجاد کنید:
در داخل تگ اسکریپت، از تابع انتخابگر DOM، querySelector، برای دریافت عناصر HTML تصویر و راهنمای ابزار استفاده کنید: const image = document.querySelector(‘.image’);const tooltip = document.querySelector(‘.tooltip’) ;
یک شنونده رویداد برای رویداد ماوس اضافه کنید. هنگامی که ماوس را روی تصویر قرار می دهید، این عملکرد اجرا می شود. هنگامی که این اتفاق می افتد، راهنمای ابزار روی صفحه نمایش داده می شود: image.addEventListener(‘mouseover’, () => { tooltip.style.display = ‘block’;});
یک شنونده رویداد برای رویداد mouseout اضافه کنید. این تابع زمانی که ماوس تصویر را ترک می کند اجرا می شود. وقتی این اتفاق می‌افتد، راهنمای ابزار از روی صفحه محو می‌شود: image.addEventListener(‘mouseout’, () => { tooltip.style.display = ‘none’;});
فایل index.html را در هر مرورگری باز کنید و روی تصویر نگه دارید تا راهنمای ابزار را مشاهده کنید:

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

  </body>
</html>

<div class="container">

</div>

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

<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>

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

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

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

نحوه محاسبه و نمایش مختصات پیکسل X و Y تصویر

اکنون که راهنمای ابزار در صفحه قابل مشاهده است، موقعیت و متن آن را تغییر دهید تا مختصات X و Y ماوس نمایش داده شود.

استایل CSS راهنمای ابزار را تغییر دهید تا قبل از اینکه ماوس را روی تصویر ببرید، راهنمای ابزار قابل مشاهده نباشد. این مانع از دیدن راهنمای ابزار در پایین تصویر قبل از پرش به مکان مکان نما می شود: .tooltip { position: absolute; بالا: -30px; سمت چپ: 0; نمایش: هیچ padding: 5px; پس زمینه رنگ: #000; رنگ: #fff; اندازه فونت: 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 را در هر مرورگری باز کنید و ماوس را روی تصویر نگه دارید تا راهنمای ابزار به روز شده را مشاهده کنید:

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

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

});

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

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

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

افزودن جلوه ها به صفحه وب تعاملی شما

اکنون می‌دانید که چگونه یک راهنمای ابزار تعاملی را روی یک تصویر در صفحه وب خود اضافه کنید. شما می توانید با آزمایش سایر جلوه های جالب HTML به پیشرفت مهارت های HTML و CSS خود ادامه دهید.

مطلب مرتبط: نحوه اشکال زدایی برنامه های Node.js در کد ویژوال استودیو

Tags: برنامه نويسی جاوا اسکریپت