آموزش تگ map در HTML

آموزش تگ map در HTML

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

ساختار تگ map

تگ <map> دارای ساختار زیر است:

  1. name: این ویژگی به تعیین نام یکتای نقشه کمک می‌کند تا بتوان به آن ارجاع داد.

مثال

<img src="floorplan.jpg" usemap="#floorplan-map" alt="نقشه‌ی طبقه">
<map name="floorplan-map">
  <area shape="rect" coords="0,0,50,50" href="room1.html" alt="اتاق ۱">
  <area shape="rect" coords="50,0,100,50" href="room2.html" alt="اتاق ۲">
</map>

در این مثال، یک تصویر به نام floorplan.jpg با استفاده از تگ <img> نمایش داده شده است و مناطق قابل کلیک برای این تصویر با استفاده از تگ <map> و مناطق <area> تعیین شده است.

نکات مهم

  1. توجه داشته باشید که مناطق قابل کلیک باید با استفاده از تگ <area> داخل تگ <map> تعریف شوند.
  2. از ویژگی‌های shape و coords تگ <area> برای تعیین شکل و مختصات مناطق قابل کلیک استفاده می‌شود.
  3. می‌توانید از ویژگی href برای تعیین مسیر مقصد پس از کلیک بر روی مناطق قابل کلیک استفاده کنید.

نتیجه‌گیری

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.