تگ map در HTML

با تگ map در HTML آشنا شوید.

نکات اصلی تگ map

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

نحوه ایجاد تگ map در HTML

تگ های نقشه یک نقشه تصویر HTML را تعریف می کنند. این یک تصویر با مناطق قابل کلیک مرتبط با پیوندها است:

<img src="https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true" width="500" height="600" alt="Creatures" usemap="#creaturemap">

<map name="creaturemap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Doggo" href="https://www.bitdegree.org">
  <area shape="rect" coords="290, 172, 333, 250" alt="Gaming" href="http://www.bitdegree.org">
  <area shape="circle" coords="337, 300, 44" alt="Level up" href="http://www.bitdegree.org">
</map>

توجه: هنگام ایجاد نقشه تصویری ، باید عنصر <img> برای مشخص کردن تصویری که پیوندها را در آن قرار می دهید ، وجود داشته باشد.

استفاده از تگ area

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

یک نقشه تصویری HTML می تواند چندین عنصر <area> داشته باشد که هرکدام از آن ها دارای پیوند لینک خاص خود هستند. عناصر <area> را می توان با استفاده از چهار ویژگی مشخص کرد:

صفات

اگر می خواهید یک نقشه تصویری قابل کلیک ایجاد کنید ، تگ های <area> همچنین باید دارای ویژگی <name> باشد. لازم است نقشه را به درستی با تصویر پیوند دهید:

<map name="creaturemap">

تگ های map در HTML همچنین از تمام ویژگی های جهانی پشتیبانی می کنند. با این حال ، اگر از ویژگی global id استفاده می کنید ، باید مطمئن شوید که با نام آن مطابقت دارد.

توجه: ویژگی <name> نمی تواند خالی باشد یا حاوی فاصله باشد.

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.