آموزش HTML - نقشه‌های تصویری

نقشه‌های تصویری (Image Maps)

نقشه‌های تصویری HTML با تگ <map> تعریف می‌شوند. یک نقشه تصویری این امکان را فراهم می‌کند که بخش‌های خاصی از یک تصویر قابل کلیک باشند و به‌عنوان لینک به مقاصد مختلف عمل کنند. این تکنیک برای ایجاد سیستم‌های مسیریابی پیچیده یا گرافیک‌های تعاملی در یک صفحه وب بسیار کاربردی است.

توسعه‌دهندگان می‌توانند با تعریف اشکال مختلف (مستطیل، دایره و چندضلعی) در یک تصویر که هر کدام لینک مخصوص به خود را دارند، محتوای بصری پویا و تعاملی ایجاد کنند که تعامل کاربر و مسیریابی را بهبود می‌بخشد.

کاربرد نقشه‌های تصویری

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

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

تگ <map> در HTML

تگ <map> برای ایجاد نقشه تصویری سمت کلاینت استفاده می‌شود و بخش‌های خاصی از تصویر را به عناصر تعاملی تبدیل می‌کند. این کار به کاربران اجازه می‌دهد روی نواحی مختلف تصویر کلیک کرده و اقدامات متعددی را اجرا کنند. عنصر <map> به‌عنوان یک نگهدارنده برای عناصر <area> عمل می‌کند که هر یک ناحیه‌ای قابل کلیک با ویژگی‌های مشخص را تعریف می‌کنند.

ساختار (Syntax)

در ادامه ساختار تگ <map> آمده است:

<map name="world map">
   <!-- Define your clickable areas here -->
</map>

هنگامی که تگ <map> همراه با تگ <img> استفاده می‌شود، ارتباطی بین تصویر و نقشه مربوط به آن برقرار می‌کند. این ویژگی به توسعه‌دهندگان وب اجازه می‌دهد با تعریف مناطق قابل کلیک مجزا در یک تصویر، محتوای پویا و تعاملی بسازند.

تعریف نواحی (اشکال) در نقشه‌های تصویری

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

در ادامه ساختار تگ <area> آمده است -

<area shape="shape_values" coords="coordinates" href="url" alt="Description">

۱. ناحیه مستطیلی

شما می‌توانید با اختصاص مقدار rect به ویژگی shape، یک شکل مستطیلی تعریف کنید. شکل مستطیلی نیازمند مختصات گوشه بالا-چپ و گوشه پایین-راست است که می‌توانید آن را در ویژگی coords مشخص کنید.

ساختار

<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">

• x1, y1 − مختصات گوشه بالا-چپ.

• x2, y2 − مختصات گوشه پایین-راست.

۲. ناحیه دایره‌ای

شما می‌توانید با اختصاص مقدار circle به ویژگی shape، یک شکل دایره‌ای تعریف کنید. شکل دایره‌ای نیازمند مختصات مرکز (x, y) و شعاع (r) است که می‌توانید آن را در ویژگی coords مشخص کنید.

<area shape="circle" coords="x,y,r" href="url" alt="Description">

• x, y − مختصات مرکز دایره.

• r − شعاع دایره.

۳. ناحیه چندضلعی

شما می‌توانید با اختصاص مقدار poly به ویژگی shape، یک شکل چندضلعی تعریف کنید. شکل چندضلعی نیازمند مجموعه‌ای از مختصات برای تشکیل شکل است که می‌توانید آن را در ویژگی coords مشخص کنید.

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

ساختار

<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="Description">

که در آن مختصات x1, y1,..., xn, yn چندضلعی را تشکیل می‌دهند.

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

ایجاد یک نقشه تصویری در HTML

برای ایجاد یک نقشه تصویری در HTML، مراحل زیر را به همراه مثال کدی دنبال کنید -

مرحله ۱: تصویر خود را آماده کنید

با تصویری که می‌خواهید به‌عنوان نقشه تصویری استفاده کنید شروع کنید. برای این مثال، از یک فایل تصویری به نام logo.png استفاده می‌کنیم.

از ویژگی usemap در تگ <img> استفاده کنید تا تصویر را با قرار دادن مقدار آن برابر با ویژگی name در تگ <map>، به تگ <map> لینک دهید:

<img src="/images/logo.png" usemap="#image_map">

مرحله ۲: نقشه تصویری را تعریف کنید

از تگ <map> برای تعریف نقشه تصویری استفاده کرده و با ویژگی name یک نام منحصر‌به‌فرد به آن اختصاص دهید.

<map name="image_map">
</map>

مرحله ۳: نواحی قابل کلیک را تعریف کنید

درون عنصر <map>، نواحی قابل کلیک را با استفاده از تگ‌های <area> تعریف کنید. شکل (rect، circle یا poly)، مختصات و آدرس URL برای لینک دادن را مشخص کنید.

<map name="image_map">
  <area shape="circle" coords="45,32,49" href="index.htm" alt="tutorialspoint">
  <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
</map>

مرحله ۳ را برای هر ناحیه قابل کلیکی که می‌خواهید روی تصویر ایجاد کنید تکرار کنید. در نهایت، فایل HTML را ببندید و آن را با پسوند .html ذخیره کنید.

مثالی از نقشه تصویری در HTML

این مثال یک نقشه تصویری HTML ایجاد می‌کند که در آن نواحی خاصی روی تصویر (logo.png) با استفاده از تگ‌های <area> درون عنصر <map> به صفحات مختلف لینک می‌شوند.

<!DOCTYPE html>
<html>
<head>
   <title>Image Map Example</title>
</head>
<body>
   <img src="/images/logo.png" usemap="#image_map">
   <map name="image_map">
      <!-- Define your clickable areas here -->
      <area shape="circle" coords="45,32,49" href="/index.htm" alt="tutorialspoint">
      <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
   </map>
</body>
</html>