آموزش طراحی سایتآموزش HTML

کار با تگ Map‌ در HTML

تگ map در HTML چیست و چه کاربردی دارد؟ برای مسیر‌دهی به قسمتی از تصویر در HTML باید از چه روشی استفاده کنیم؟ در این مقاله از سری آموزش های HTML با تگ map آشنا می‌شویم.

تگ Map در HTML

برای تعریف یک نقشه بر روی تصویر باید از تگ <map> استفاده شود. نقشه تصاویر یا image-map در واقع محیط‌های قابل کلیکی بر روی تصاویر هستند که در سمت کاربر پیاده شده‌اند.

تگ <map> از یک خاصیت Name پشتیبانی می‌کند که مقدار آن در تگ <img> با خاصیت usemap تعریف می‌شود.

خاصیت‌های تگ Map :

خاصیت مقدار توضیح
Name نام مپ استفاده اجباری. نام نقشه تصویر را تعیین می کند

تگ map شامل تعداد مشخصی تگ‌های داخلی <area> است که محیط های قابل کلیک برروی تصویر را تعیین می‌کنند.

تفاوت این تگ در نسخه‌های HTML 4.01 و HTML5

در HTML5 اگر از خاصیت id استفاده شود، مقدار آن می‌بایست با خاصیت name در تگ map‌ معرفی شود.

تفاوت این تگ در HTML و XHTML

در XHTML ، خاصیت name منقضی شده است و به زودی حذف خواهد شد. به جای آن از خاصیت id استفاده کنید.

تگ <map> از رویداد ها (Events) نیز پشتیبانی می کند.

مثال:

See the Pen Map Tag by MIZFA.COM
(@mizfa) on CodePen.

تگ داخلی <area> و خصوصیات آن

همانطور که در مثال مشاهده می‌کنید، برای مشخص کردن محل مورد نظرمان در تصاویر می‌بایست از تگ داخلی <area> استفاده کنیم که خود این تگ خصوصیات مخصوص خود را دارد. در جدول زیر خصوصیات تگ داخلی <area>‌ را مورد بررسی قرار می‌دهیم و سپس توضیحاتی را در رابطه با این خصوصیات ارائه می‌کنیم.

خاصیت مقدار توضیحات
alt متن اگر از خاصیت href استفاده کرده باشید، می‌توانید یک عنوان برای نمایش هنگامی که کاربر در محدوده موس را نگه داشته است.
coords مختصات محدوده مورد نظرمان را مشخص می‌کند.
download نام فایل لینکی است که کاربر با کلیک بر روی آن می‌تواند فایل لینک شده را دانلود کند.
href لینک یک لینک را در مختصات مشخص شده تعریف می‌کند.
hreflang کد زبان زبان لینک را مشخص می‌کند.
media Media Query مشخص می‌کند که لینک وارد شده برای چه رسانه یا دستگاهی بهینه است. (برای ریسپانسیو کردن صفحات وب مورد استفاده قرار می‌گیرد.)
nohref مقدار در HTML5 پشتیبانی نمی‌شود.

فعال بودن یا غیر فعال بودن لینک‌ها را مشخص می‌کند.

True‌ به معنای فعال بودن.

False به معنای غیر فعال بودن.

rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
ارتباط بین لینک href و صفحه را مشخص می‌کند.
shape default
rect
circle
poly
شکل تصویر برای مختصات را مشخص می‌کند.
target _blank
_parent
_self
_top
framename
هدف لینک href‌ را مشخص می‌کند.
type نوع رسانه نوع رسانه را مشخص می‌کند.

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

خصوصیت Shape و Coords

خصوصیت shape شکل مکانی مورد نظرمان در تصویر را مشخص می‌کند و انواع مختلفی دارد؛ همچنین خصوصیت coords نیز پس از مشخص شدن نوع shape مختصات محدوده مورد نظرمان را مقدار دهی می‌کند و مشخص می‌کند.

شکل rect یا مربع/مستطیل: با مقدار x1 و y1 برای مشخص کردن مختصات بالا چپ و با مقدار x2 و y2 برای مشخص کردن مختصات پایین راست معرفی می‌شود.

برای مثال در تصویر زیر نوع shape از نوع rect مشخص شده است و محدوده نیز با استفاده از Coords به ترتیب مشخص شده است. (coords=left,top,right,bottom – croods=x1,y1,x2,y2)

شکل مربعی/مستطیلی در تگ map
شکل مربعی/مستطیلی در تگ map

نمونه کد:

<img usemap="#butterfly" src="image.jpg">

<map name="butterfly">
<area shape="square" coords="0,0,60,60" href="test1.html">
<area shape="square" coords="80,80,200,150" href="test2.html">
</map>
خروجی نمونه کد مربعی/مستطیلی
خروجی نمونه کد مربعی/مستطیلی

شکل circle یا دایره: برای مشخص کردن مختصات به صورت دایره‌ای از طریق ۳ متغیر طول – عرض و شعاع (x,y,r) اقدام می‌کنیم.

متغیر x و y محل دقیق مرکز دایره را مشخص می‌کنند و متغیر r نیز شعاع دایره را مشخص می‌کند. بنابراین پس از مشخص کردن متغیر ها ما دایره‌ای به شعاع r و به مرکزیت x و y خواهیم داشت.

در زیر نمونه‌ای از شکل Circle را مشاهده می‌کنید که درون تصویر محل مورد نظرمان به صورت دایره‌ای مشخص شده است. (coords=height,width,radius – coords=x,y,r)

شکل دایره‌ای در خصوصیت shape
شکل دایره‌ای در خصوصیت shape

نمونه کد:

<img usemap="#butterfly" src="image.jpg">

<map name="butterfly">
<area shape="circle" coords="30,30,10" href="test1.html">
<area shape="circle" coords="80,80,40" href="test2.html">
</map>
خروجی نمونه کد دایره‌ای
خروجی نمونه کد دایره‌ای

شکل Poly یا چند ضلعی: این شکل با مشخص کردن ناحیه های مختلف از تصویر با استفاده از طول و عرض های مختلف یک چند ضلعی ایجاد می‌کند که می‌توانید مکان‌های مختلفی از تصویر را انتخاب کنید. شما از طریق شکل polygon یا چندضلعی می‌توانید بی‌نهایت ناحیه مختصاتی را در تصویرتان مشخص کنید.

برای مشخص کردن مختصات‌های مورد نظر به صورت x1,y1 سپس x2,y2 الی آخر به ترتیب مختصات‌ها را وارد می‌کنیم. (coords=x1,y1,x2,y2,x3,y3,…,xn,yn)

شکل چندضلعی در خصوصیت shape
شکل چندضلعی در خصوصیت shape

نمونه کد:

<img usemap="#butterfly" src="image.jpg">

<map name="butterfly">
<area shape="poly" coords="100,0,150,60,10,40" href="test1.html">
</map>
خروجی نمونه کد Polygon
خروجی نمونه کد Polygon

ابزاری برای ساخت Image Map

وب سایت image-map.net برای ایجاد تگ map راحت تر
وب سایت image-map.net برای ایجاد تگ map راحت تر

وب سایت‌های مختلفی برای ساخت image map‌ وجود دارد که به شما کمک می‌کند مختصات دقیق نقاط مورد نظرتان را در تصویر را پیدا کنید.

یکی از این ابزار‌ها یا وب‌سایت‌ها، وب سایت Image-map.net می‌باشد که با این ابزار می‌توانید با استفاده از shape های مختلف یک image map دقیق بسازید و مقادیر مورد نظرتان را به آن معرفی کنید.

مراحل کار با ابزار:

۱ – یک تصویر انتخاب کنید:

تصویر نمونه - کره زمین
تصویر نمونه – کره زمین

۲ – از طریق یکی از گزینه‌های Select Image From My Pc یا Load Image From Website تصویر خود را وارد کنید.

وارد کردن تصویر در وب سایت
وارد کردن تصویر در وب سایت

۳ – قسمت‌های مورد نظرتان را مشخص کنید و مقدار‌های لازم را وارد کنید.

بخش مورد نظر در تصویر برای image map
بخش مورد نظر در تصویر برای image map

۴ – بر روی Show My Code کلیک کنید و کد خود را استفاده کنید.

نتیجه گیری

در این مقاله با تگ map و خصوصیات آن آشنا شدیم و متوجه شدیم که می‌توانیم قسمت‌هایی از یک تصویر را قابل کلیک کنیم تا اتفاقاتی خاص بر روی آن قسمت‌ها رخ دهد. همچنین با تگ area که یک تگ داخلی نسبت به تگ map می‌باشد و با خصوصیات این تگ نیز که اصلی‌ترین کار را در مسیریابی تصاویر انجام می‌دهد، آشنا شدیم.

همچنین با یک ابزار برای تولید Image Map‌ خیلی دقیق و راحت آشنا شدیم که از آن می‌توانید به صورت رایگان استفاده کنید و کد‌هایی با تگ map و area دریافت کنید.

اگر سوالی در مورد مسیریابی و تگ‌های معرفی شده در این آموزش داشتید یا نکته‌ی دیگری در این مورد می‌دانید که به دوستان کمک می‌کند، خوشحال میشیم که برامون در بخش نظرات بفرستینش.

با آموزش‌های دیگر میزفا همراه باشید.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫2 نظرها

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر