
تگ map در HTML
با استفاده از تگ map در HTML میتوان یک نقشه تصویری ایجاد کرد.
مثال
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://fa.wikipedia.org/wiki/%D8%B1%D8%A7%DB%8C%D8%A7%D9%86%D9%87">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%84%D9%81%D9%86">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://fa.wikipedia.org/wiki/%D9%82%D9%87%D9%88%D9%87">
</map>
تعریف و کاربرد
از تگ map در HTML برای ایجاد یک نقشه تصویری استفاده میکنیم یعنی مناطقی را روی یک تصویر تعریف کنیم که با کلیک برروی آنها اتفاق خاصی بی افتد.
توضیحات بیشتر
نقشه تصویری چیست ؟ فرض کنید شما یک تصویر دارید که عکس یک فنجان قهوه هست ، شما با استفاده از تگ <map>
میتوانید کاری بکنید که اگر کاربر روی اون فنجان قهوه داخل تصویر کلیک کرد مثلاً وارد یک وب سایت بشه ، دقیقاً همین کار رو تو مثال اول انجام دادیم !
خاصیت usemap
برای اتصال یا ایجاد ارتباط بین تصویر و نقشه تعریف شده باید مقدار خاصیت usemap
در عنصر <img>
برابر با مقدار خاصیت name
در تگ <map>
باشد.
عنصر area
تگ <map>
از چندین تگ <area>
تشکیل شده که عنصر <area>
نقاط قابل کلیک روی نقشه تصویر را مشخص می کنند.
پشتیبانی مرورگر ها
عنصر | |||||
---|---|---|---|---|---|
<map> | بله | بله | بله | بله | بله |
خواص
خاصیت | مقدار | توضیحات |
---|---|---|
name | mapname | یک نام برای نقشه تصویری مشخص میکند (ضروری) |
خواص عمومی
تگ map
از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ map
از رویداد های عمومی در HTML پشتیبانی میکند.
تنظیمات پیش فرض CSS
اکثر مرورگر ها عنصر map
در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:
map {
display: inline;
}
پرهيز از بخل ورزى
و درود خدا بر او، فرمود: (در سر راه از كنار مزبله اى عبور مى كرد.) اين همان است كه بخيلان به آن بخل مى ورزند.
(و در روايت ديگرى نقل شد كه) اين چيزى است كه ديروز بر سر آن رقابت مى كرديد.
حکمت 195 نهج البلاغه