آموزش تگ 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 |
<body> <img src="images/my-image-map.jpg" usemap="#freelearn" /> <map name="freelearn"> <area shape="circle" coords="360, 211, 33" href="https://free-learn.ir" target="_blank" alt="قسمت دایره ای" title="قسمت دایره ای" /> <area shape="rect" coords="13, 20, 129, 53" href="https://free-learn.ir" target="_blank" alt="قسمت مستطیلی" title="قسمت مستطیلی" /> <area shape="poly" coords="301, 35, 312, 42, 322, 29, 334, 20, 343, 17, 339, 35, 331, 51, 328, 68, 331, 91, 332, 101, 332, 108, 329, 127, 324, 148, 321, 162, 314, 182, 308, 209, 292, 218, 274, 213, 268, 197, 263, 180, 260, 169, 263, 156, 263, 143, 255, 130, 249, 116, 249, 101, 253, 77, 258, 68, 261, 60, 259, 46, 252, 38, 244, 25, 240, 11, 245, 4, 255, 17, 269, 34, 282, 31, 287, 30" href="https://free-learn.ir" target="_blank" alt="سر اسب" title="سر اسب" /> <area shape="poly" coords="238, 29, 222, 36, 210, 49, 200, 57, 195, 69, 186, 64, 174, 64, 161, 71, 144, 80, 129, 86, 112, 91, 100, 90, 89, 88, 64, 95, 48, 111, 37, 129, 19, 123, 9, 120, 2, 124, 2, 151, 2, 248, 91, 248, 105, 186, 111, 161, 116, 146, 133, 140, 154, 136, 149, 171, 157, 186, 171, 183, 193, 178, 219, 167, 228, 164, 258, 162, 258, 156, 251, 156, 258, 151, 253, 144, 252, 134, 243, 133, 245, 124, 236, 128, 227, 138, 222, 146, 209, 150, 192, 156, 179, 159, 181, 151, 191, 109, 195, 97, 203, 96, 215, 98, 224, 94, 241, 77, 251, 65, 258, 53, 245, 39" href="https://free-learn.ir" target="_blank" alt="دختر سوار بر اسب" title="دختر سوار بر اسب" /> </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; } |
