آموزش تگ map در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ map در HTML با من همراه باشید.
Free-Learn
تگ Map در HTML
تگ map یا ( مَپ ) تگی است که با استفاده از آن میتوان یک نقشه ی تصویری یا Image-Map را در یک صفحه وب ایجاد کرد.
شاید براتون سواله که اصلا نقشه تصویری یا Image-Map چیه؟! نقشه تصویری بطور کلی به یک عکس یا تصویر که دارای چندین نقطه قابل کلیک (یعنی کاربر بتونه رو اون نقاط کلیک کنه) باشد، نقشه تصویری گفته می شود.
برای ایجاد یک نقشه تصویری ما باید از تگ img برای ایجاد تصویر یا عکس مورد نظرمون استفاده نماییم و از تگ map و تگ area برای ایجاد نقاط قابل کلیک بروی تصویر مورد نظرمون استفاده نماییم.
Free-Learn
مثال از تگ map در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
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 زیر نمایش میدهند.
|
1 2 3 |
map { display: inline; } |
