نقشه تعاملی با نشانگرها: راهنمای جامع و کامل


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

ساختار اولیه نقشه تعاملی




در ابتدا، باید بدانید که برای ساختن یک نقشه تعاملی، نیازمند مجموعه‌ای از عناصر پایه هستید. این عناصر شامل یک عنصر HTML برای قرار دادن نقشه، استایل‌های CSS برای ظاهر و طراحی، و اسکریپتی در جاوااسکریپت برای افزودن قابلیت‌های تعاملی است. در این نمونه، از تصویر نقشه‌ اصلی استفاده می‌کنیم، اما می‌توانیم از نقشه‌های SVG یا نقشه‌های آنلاین نیز بهره ببریم.
ابتدا، یک فایل HTML ایجاد می‌کنیم و ساختار پایه را تعیین می‌نماییم:
html  


<!DOCTYPE html>


<html lang="fa">


<head>


<meta charset="UTF-8" />


<title>نقشه تعاملی با نشانگرها</title>


<link rel="stylesheet" href="styles.css" />


</head>


<body>


<div class="map-container">


  <img src="map-image.jpg" alt="نقشه" class="map-image" />


  <!-- نشانگرها در این قسمت قرار می‌گیرند -->


  <div class="marker" style="top: 30%; left: 40%;" data-info="مکان ۱"></div>


  <div class="marker" style="top: 60%; left: 70%;" data-info="مکان ۲"></div>


</div>
<div id="info-box" class="info-box" style="display:none;"></div>
<script src="script.js"></script>


</body>


</html>

در این ساختار، ما یک کادر با کلاس `map-container` داریم که شامل تصویر نقشه و نشانگرهای نقطه‌ای است. هر نشانگر یک عنصر `<div>` است، که موقعیت آن‌ها با استایل‌های `top` و `left` تعیین می‌شود، و هر کدام یک ویژگی `data-info` دارند، که اطلاعات مربوط به آن مکان را نگه می‌دارد.

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




در فایل `styles.css`، باید ظاهر نقشه و نشانگرها را تنظیم کنیم. این استایل‌ها، نقش مهم در جذابیت و کاربرپسند بودن نقشه دارند. نمونه‌ای از استایل‌های پایه:
css  


body {


  font-family: Tahoma, Geneva, Verdana, sans-serif;


  margin: 0;


  padding: 0;


  background-color: #f4f4f4;


}
.map-container {


  position: relative;


  width: 80%;


  margin: 20px auto;


  border: 2px solid #333;


  border-radius: 8px;


  overflow: hidden;


}
.map-image {


  width: 100%;


  height: auto;


  display: block;


}
.marker {


  position: absolute;


  width: 20px;


  height: 20px;


  background-color: red;


  border-radius: 50%;


  cursor: pointer;


  transition: all 
  1. 3s ease;


}
.marker:hover {


  background-color: blue;


  transform: scale(1...  ← ادامه مطلب در magicfile.ir