خانه آموزش HTML آموزش تگ های HTML آموزش تگ map در HTML

آموزش تگ map در HTML

توسط

۱۳۹۸-۰۲-۰۶

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ map در HTML با من همراه باشید.

آموزش تگ map در HTML

Free-Learn

تگ Map در HTML

تگ map یا ( مَپ ) تگی است که با استفاده از آن میتوان یک نقشه ی تصویری یا Image-Map را در یک صفحه وب ایجاد کرد.

شاید براتون سواله که اصلا نقشه تصویری یا Image-Map چیه؟! نقشه تصویری بطور کلی به یک عکس یا تصویر که دارای چندین نقطه قابل کلیک (یعنی کاربر بتونه رو اون نقاط کلیک کنه) باشد، نقشه تصویری گفته می شود.

برای ایجاد یک نقشه تصویری ما باید از تگ img برای ایجاد تصویر یا عکس مورد نظرمون استفاده نماییم و از تگ map و تگ area برای ایجاد نقاط قابل کلیک بروی تصویر مورد نظرمون استفاده نماییم.

Free-Learn

مثال از تگ map در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<img src="images/image-map.jpg" usemap="#freelearn">
 
<map name="freelearn"> 
   <area shape="rect" coords="101, 48, 299, 170" href="link1.html">
   <area shape="rect" coords="62, 198, 109, 225" href="link2.html">
   <area shape="rect" coords="118, 196, 165, 224" href="link3.html">
   <area shape="rect" coords="174, 198, 220, 223" href="link4.html">
   <area shape="rect" coords="232, 198, 280, 222" href="link5.html">
   <area shape="rect" coords="289, 198, 335, 225" href="link6.html">
</map>

</body>

<body>

</map>

</body>

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ map در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ map در HTML

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

نام صفت	مقدار	توضیح
name	mapname	یک نام برای نقشه تصویری مشخص میکند. (ضروری)

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ map از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

نامی که در صفت usemap در تگ img ایجاد می شود باید با نامی که در صفت name در تگ map ایجاد می شود یکسان باشد.

در XHTML استفاده از صفت name نامعتبر می باشد لذا باید از صفت ID بجای صفت name استفاده نمود.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ map را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

map {
  display: inline;
}

map {

display: inline;

}