تگ 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) نیز پشتیبانی می کند.
مثال:
36873
تگ داخلی <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)
نمونه کد:
<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)
نمونه کد:
<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)
نمونه کد:
<img usemap="#butterfly" src="image.jpg"> <map name="butterfly"> <area shape="poly" coords="100,0,150,60,10,40" href="test1.html"> </map>
ابزاری برای ساخت Image Map
وب سایت‌های مختلفی برای ساخت image map وجود دارد که به شما کمک میکند مختصات دقیق نقاط مورد نظرتان را در تصویر را پیدا کنید.
یکی از این ابزار‌ها یا وب‌سایت‌ها، وب سایت Image-map.net می‌باشد که با این ابزار می‌توانید با استفاده از shape های مختلف یک image map دقیق بسازید و مقادیر مورد نظرتان را به آن معرفی کنید.
مراحل کار با ابزار:
۱ – یک تصویر انتخاب کنید:
۲ – از طریق یکی از گزینه‌های Select Image From My Pc یا Load Image From Website تصویر خود را وارد کنید.
۳ – قسمت‌های مورد نظرتان را مشخص کنید و مقدار‌های لازم را وارد کنید.
۴ – بر روی Show My Code کلیک کنید و کد خود را استفاده کنید.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
تگ MAP چیکار میکنه؟ نقشه ایران را از اینترنت دانلود کنید و کرج را با این سیستم پیاده سازی کنید و کد و خروجی آن را برایمان ارسال کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با تگ map و خصوصیات آن آشنا شدیم و متوجه شدیم که می‌توانیم قسمت‌هایی از یک تصویر را قابل کلیک کنیم تا اتفاقاتی خاص بر روی آن قسمت‌ها رخ دهد. همچنین با تگ area که یک تگ داخلی نسبت به تگ map می‌باشد و با خصوصیات این تگ نیز که اصلی‌ترین کار را در مسیریابی تصاویر انجام میدهد، آشنا شدیم.
همچنین با یک ابزار برای تولید Image Map خیلی دقیق و راحت آشنا شدیم که از آن می‌توانید به صورت رایگان استفاده کنید و کد‌هایی با تگ map و area دریافت کنید.
اگر سوالی در مورد مسیریابی و تگ‌های معرفی شده در این آموزش داشتید یا نکته‌ی دیگری در این مورد می‌دانید که به دوستان کمک میکند، خوشحال میشیم که برامون در بخش نظرات بفرستینش.
با آموزش‌های دیگر میزفا همراه باشید.
29 پاسخ
سلام
وقتی که به عکسمون width و height میدیم و بعد میایم داخل سایت و مختصات تعیین میکنیم مختصات درست رو به ما نمیده چون اندازه عکس رو تغییر دادیم ، چه راه حلی پیشنهاد میدید ؟
جواب سوال:
برای دادن قابلیت لینک شدن(به آدرسی دلخواه) به قسمت مدنظرمان از یک عکس به کار میره
سلام ممنون از مطلب خوبتون سوالم اینه از w3schools استفاده می کنید برای توضیح در مورد این تگ ها؟ و این که وقتی بخوایم مثلا نقشه ایران رو به این صورت قابل کلیک کنیم باید چطور از سایتی که گفتید استفاده کنیم چون نمیشه شکلی رو پیدا کرد که به نواحی هر استان بخوره
سلام ببینید سر فصل ها از w3schools ایده گیری شده ولی آموزش کاملا تجربی هست و من سعی کردم تجربه خودم رو توی مقالات ارائه بکنم.
درمورد سوال دومتون خب باید خودتون طراحیش بکنید دیگه اگر پیدا نمیشه.
سلام فرض کنید مختصاتی رو عکس مشخص شده میخایم فقط اون قسمت رنگی شه چه کار باید بکنیم؟
برای اینکه بخواهیم قسمتی از تصویر را لینک کنیم استفاده میشود
سلام علی اکبر، درست نوشتی. باریکلا.
پاسخ سوال :
برای اضافه کردن لینک و یا توضیحات به قسمتی از عکس استفاده می شود .
سلام محمد بله درسته.
سلام ببخشین من از برنامه مپ کد عکس مورد نظرمو گرفتم اما وقتی تو html وارد کردم مختصات خروجی عکسم تو قسمت دیگه عکسم افتاد چیکار کنم؟
تو html سایز عکسم وارد نکردم!
من میخوام در یک عکس در دو قسمت لینک ایجاد کنم مثلا بک نقشه ایران هست من تهران رو انجام دادم و یک بار از map و داخل اون از usepap استفاده کردم حالا میخوام اصفهان رو هم اصافه کنم ابتدا تونستم از سایت imagemap مختصات شهر اصفهان رو به دست بیارم فقط نمیدونم باید یه usemap دیگه تعریف کنم یا چی؟
سلام فاطمه،
نه نیازی نیست. فقط باید از یک تگ area دیگه اضافه کنی و اون تگ رو داخل تگ map اصلیت قرار بدی. اگر میخوای چند نقطه مختلف رو انتخاب کنی فقط کافیه با تگ area بخش های مختلف رو مشخص کنی و پایان.
موفق باشی.
سلام چطوری میشه تگ مپ رو برای محتوا متنی بکار برد
سلام شیرین. متوجه سوالت نشدم. از تگ متن که در محتوای متنی استفاده نمیکنند.
من میخوام این مپ تگ برای متن بنویسم یعنی به محتوا متنی اشاره کنم اما نمیدونم چطوری بنویسمش؟?? ولی میدونم که میشه ایجادش کرد
شیرین عزیز لطفا نمونه ای از چیزی که مد نظرته برامون بفرست. من واقعا متوجه منظورت نمیشم.
سلام.تو سایت image-map.net در قسمت تایتل و لینک و تارگت چی باید بنویسیم؟؟؟
سلام روز بخیر
برای قسمت تایتل – عنوانی که میخواین وقتی موس روی اون قسمت قرار بگیره و نمایش داده بشه رو وارد میکنین.
قسمت لینک – لینک صفحه ای که پس از کلیک بر اون قسمت باز میشه رو انتخاب میکنین.
تارگت هم نوع عملی هست که پس از کلیک اتفاق میوفته مثلا blank در یک صفحه جدید لینک باز میشه.
امیدوارم به جوابت رسیده باشی. بازم سوالی داشتی بگو من درخدمتم.
سلام وقتتون بخیر لطف میکند بیشتر راهنمایی کنید کد رو ک÷ی کردم در قسمت html سایت حتما باید دوباره عکس رو انتخاب کنم و این کد رو بهش اضافه کنم یا نه ممنون از راهنماییتون
سلام وقت شما بخیر باشه. متاسفانه سوال شما برای بنده واضح نیست و متوجه نشدم.
سلام وقت شما هم بخیر.
وقتی کدی که از سایت image-map دریافت میکنین، همون کد رو میتونین در صفحهاتتون استفاده کنید.
امیدوارم به جوابت رسیده باشی. اگر بازم سوال داشتی بگو من در خدمتم.
سلام وقتتون بخیر
ببخشید در یک صفحه میخوام دو عکس بذارم و هر کدام از عکس ها سایز متفاوت دارن و هر کدام رو میخوام روی عکس ها لینک بذارم برای هرکدام کد گذاشتم ولی یکی اوکی شه یکی دیگه هر کار میکنم لینک در نمیشه ممنون میشم راهنماییم کنید
سلام وقت شما هم بخیر.
حقیقتا من درست متوجه سوالتون نشدم. ولی صد در صد یک جای کار کد هاتون رو اشتباه وارد میکنید.
میتوانم کدها رو براتونبفرستم نگاه کنیدببینید کجاش مشکل داره ممنون
ممنون درست شد
اتریبیوت coords نه croods این مورد رو تصحیح کنید با تشکر!!
سلام دوستم. اصلاح شد. ممنون از بازخورد شما
سلام میخواستم بدونم مختصاتو چجوری باید بدست بیارم؟ چجوری اون عددها بدست میاد؟ ممنون
سلام فرشاد ، داخل مقاله یک ابزار معرفی کردیم برای مختصات ، از اون استفاده کنی خیلی راحت تر هست کارت.