site-logo site-logo
آموزش تگ map در HTML
نوشتن نظر کلیک کنید

آموزش تگ 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 - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

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

نظرات

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

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