ساخت هات اسپات(نقاط تعاملی) در تصاویر با HTML, CSS و JavaScript برای دسته بندی سایت

در این مقاله، نحوه ایجاد نقاط تعاملی (Hotspots) روی تصاویر با استفاده از HTML، CSS و JavaScript را به‌طور کامل توضیح خواهیم داد. این نقاط تعاملی به شما امکان می‌دهند تا با کلیک یا هاور روی قسمت‌های مختلف یک تصویر، توضیحات یا لینک‌های مرتبط را به کاربران نمایش دهید. بیشتر بدرد دسته بندی های سایت میخوره با یه ظاهر جدید و جالب… نیاز به کار خیلی پیچیده ای نیست فقط کافیه عکستون رو آپلود کنید روی سایتتتون و لینک مستقیمش رو بذارید توی کند html زیر و یک المان html المنتور بذارید توی صفحه و این کد رو قرار بدید توش تا باهم استایل هاش رو درست کنیم و نقاط رو بذاریم جای درست خودش… در نهایت خروجی پایانی این خواهد شد:

سپر

توضیحات شما در اینجا قرار میگیرد توضیحات توضیحات توضیحات

اطلاعات بیشتر

کاپوت

توضیحات شما در اینجا قرار میگیرد توضیحات توضیحات توضیحات

اطلاعات بیشتر

آموزش تصویری در یوتیوب آپلود شده:

1. استفاده از HTML برای ساختاردهی

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

<div class="custom-container">
  <img src="https://netclick.site/wp-content/uploads/2024/12/brilliance-h530-side-0-326359-min-1-1024x498-1.webp" alt="car" class="custom-image">
  <div class="custom-hotspot" style="top: 4%; left: 46%;"></div>
  <div class="custom-tooltip" style="top: 2%; left: 50%;">
    <h4>سپر</h4>
    <p>توضیحات شما در اینجا قرار می‌گیرد</p>
    <a href="#">اطلاعات بیشتر</a>
  </div>
  <div class="custom-hotspot" style="top: 15%; left: 60%;"></div>
  <div class="custom-tooltip" style="top: 13%; left: 66%;">
    <h4>کاپوت</h4>
    <p>توضیحات شما در اینجا قرار می‌گیرد</p>
    <a href="#">اطلاعات بیشتر</a>
  </div>
</div>

این کد شامل یک تصویر (با تگ <img>) و دو نقطه تعاملی (با تگ‌های <div class="custom-hotspot">) است. هر نقطه تعاملی دارای یک توضیح مرتبط (با تگ‌های <div class="custom-tooltip">) است که شامل عنوان، متن توضیحات و یک لینک برای اطلاعات بیشتر است.

2. استایل‌دهی با CSS

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

@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font/Vazir.css');

body {
  font-family: 'Vazir', Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

.custom-container {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

.custom-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 6px 6px rgba(0, 0, 0, 0.1);
}

.custom-hotspot {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #007bff;
  border: 3px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  animation: pulse 1.5s infinite;
  z-index: 10;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
  }
}

.custom-tooltip {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #007bff;
  border-radius: 12px;
  padding: 15px;
  width: 360px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  text-align: right;
  display: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}

.custom-hotspot:hover + .custom-tooltip,
.custom-tooltip:hover {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.custom-tooltip h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #007bff;
}

.custom-tooltip p {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.custom-tooltip a {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: white;
  background-color: #007bff;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-tooltip a:hover {
  background-color: #0056b3;
  box-shadow: 0 6px 15px rgba(0, 86, 179, 0.4);
}

@media (max-width: 768px) {
  .custom-tooltip {
    transform: translateY(0) !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding: 18px;
    box-sizing: border-box;
    left: 0;
    right: 0;
  }

  .custom-tooltip h4 {
    font-size: 18px;
  }

  .custom-tooltip p {
    font-size: 16px;
  }

  .custom-tooltip a {
    font-size: 16px;
    padding: 10px 15px;
  }

  .custom-hotspot, .custom-tooltip {
    user-select: none;
  }
}

در این کد CSS:

• فونت “وزیر” را با استفاده از @import اضافه کرده‌ایم تا ظاهر متن‌ها بهتر شود.
• با استفاده از کلاس‌های .custom-container, .custom-image, .custom-hotspot, و .custom-tooltip به عناصر مختلف استایل داده‌ایم.
• با استفاده از انیمیشن @keyframes pulse به نقاط تعاملی جلوه بصری اضافه کرده‌ایم.
• استایل‌های واکنش‌گرا را برای نمایش بهتر در دستگاه‌های موبایل تعریف کرده‌ایم.

3. اضافه کردن قابلیت تعاملی با JavaScript

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

document.querySelectorAll('.custom-hotspot').forEach(hotspot => {
  hotspot.style.position = 'absolute';

  hotspot.addEventListener('mousedown', function (e) {
    e.preventDefault();
    let startX = e.clientX;
    let startY = e.clientY;

    const rect = hotspot.parentElement.getBoundingClientRect();
    const initialTop = hotspot.offsetTop;
    const initialLeft = hotspot.offsetLeft;

    function onMouseMove(event) {
      const deltaX = event.clientX - startX;
      const deltaY = event.clientY - startY;

      const newTop = initialTop + deltaY;
      const newLeft = initialLeft + deltaX;

      hotspot.style.top = `${(newTop / rect.height) * 100}%`;
      hotspot.style.left = `${(newLeft / rect.width) * 100}%`;
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);

      const topPercentage = (hotspot.offsetTop / rect.height) * 100;
      const leftPercentage = (hotspot.offsetLeft / rect.width) * 100;
      console.log(`New position: top: ${topPercentage.toFixed(2)}%; left: ${leftPercentage.toFixed(2)}%;`);
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });
});

در این کد جاوا اسکریپت:

• نقاط تعاملی با استفاده از querySelectorAll انتخاب شده‌اند.
• با استفاده از رویدادهای mousedown, mousemove, و mouseup امکان جابه‌جایی نقاط تعاملی فراهم شده است.

جمع بندی

برای استفاده از این راهنما، کافیست قطعات کد بالا را در فایل‌های HTML، CSS خود قرار دهید سپس نتیجه رو در مرورگر خود بازکنید و با ctrl + shift +j قسمت console رو بالا بیارید و کد JavaScript رو اونجا وارد کنید سپس نقاط رو بکشید به جای درستش و کد html رو اصلاح کنید و مسیر تصویر خود را به جای your-image-url.jpg وارد کنید در html. این روش به شما امکان می‌دهد تا نقاط تعاملی با توضیحات قابل مشاهده و قابل جابجایی در تصاویر خود ایجاد کنید.

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

آیدی ادمین: t.me/mbmmdbm