تگ map (نقشه تصویری) در html

زمان مطالعه
4 دقیقهتعداد بازدید
1082تعداد پرسش ها
0برچسب ها :
نکات html
تگ map (نقشه تصویری) در html

زمان مطالعه
4 دقیقهتعداد بازدید
1082تعداد پرسش ها
0برچسب ها :
نکات htmlتگ map (نقشه تصویری) در html
با استفاده از تگ های نقشه (map , area) در html میتوانید نقاظ قابل کلیک بر روی تصویر خود ایجاد کنید.
مشخص کردن نقشه map در تصویر
تگ یک نقشه روی تصویر را مشخص می کند همچنین تگ area نقاط قابل کلیک را در مثال ذیل شما می توانید بر روی نقاط مشخص شده کلیک کنید که خصوصیت usemap="#workmap" مشخص میکنه که این تصویر توسط کدام map به نقاط مختلف تقسیم شده است. شناسه workmap نام تگ map فعلی است. تگ های area نیز مشخص کننده نقاط قابل کلیک در تصویر فعلی می باشند.
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="laravel" href="https://jobteam.ir/category/Laravel">
<area shape="rect" coords="290,172,333,250" alt="programing" href="https://jobteam.ir/category/programing">
<area shape="circle" coords="337,300,44" alt="content" href="https://jobteam.ir/category/Content-Marketing">
</map>
</body>
</html>
اشکال مختلف نقاط قابل کلیک
در تگ area خصوصیت shape مشخص کننده نوع نقطه قابل تنظیم به یکی از اشکال ذیل است
rect - یک منطقه مستطیل شکل را تعریف می کند
دایره - یک منطقه دایره ای را تعریف می کند
poly - یک منطقه چند ضلعی را تعریف می کند
default - کل منطقه را تعریف می کند
تا وقتی که خصوصیت coords مقداردهی نشده باشد منطقه مورد نظر قابل کلیک نخواهد بود
فراخوانی یک تابع جاوا اسکریپت
شما می توانید با کلیک کاربر در نقطه مورد نظر یک تابع جاوا اسکریپت رو فراخوانی کنید
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the cup of coffee to execute a JavaScript function:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
</body>
</html>


جایگزین الکسا: ماجرای بازنشستگی الکسا و معرفی بهترین ابزارها برای جایگزینی آن

تگ audio در HTML

تگ video در HTML

تگ head در زبان نشانه گذاری HTML

تگ iframe در زبان نشانه گذاری HTML
تگ کنونیکال چیست؟ صفر تا صد کنونیکال + آموزش استفاده
آموزش جامع هشتگ گذاری در اینستاگرام ۰ تا ۱۰۰

تگ picture در html

تگ a یا لینک (پیوند) در html

تگ های نقل قول و استناد در html (Quotation and Citation)

لینک فارسی یا انگلیسی،کدام url در سئو می تواند بهتر باشد؟

سئو سایت فروشگاهی بهمراه چک لیست کامل

سایت مپ نکات و موارد مهم درباره ثبت نقشه سایت در گوگل

پشتیبانی سایت + موارد، هزینه و تعرفه ها

بوم مدل کسب و کار چیست و راهنمای کامل

حذف سشن (session) سبد خرید برگشت از درگاه پرداخت در لاراول

نصب کتابخانه در پایتون

ارجاع دهنده یا منبع ورودی کاربر به سایت شما

استراتژی سئو به زبان ساده

مشکل sql_mode=only_full_group_by در لاراول (laravel)