آموزش 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) نیز پشتیبانی می کند.

مثال:

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)

شکل مربعی/مستطیلی در تگ 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 چیکار میکنه؟ نقشه ایران را از اینترنت دانلود کنید و کرج را با این سیستم پیاده سازی کنید و کد و خروجی آن را برایمان ارسال کنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

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

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

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

علی اسماعیلی

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

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

‫24 دیدگاه ها

  1. برای اینکه بخواهیم قسمتی از تصویر را لینک کنیم استفاده میشود

  2. پاسخ سوال :
    برای اضافه کردن لینک و یا توضیحات به قسمتی از عکس استفاده می شود .

  3. سلام ببخشین من از برنامه مپ کد عکس مورد نظرمو گرفتم اما وقتی تو html وارد کردم مختصات خروجی عکسم تو قسمت دیگه عکسم افتاد چیکار کنم؟
    تو html سایز عکسم وارد نکردم!

  4. من میخوام در یک عکس در دو قسمت لینک ایجاد کنم مثلا بک نقشه ایران هست من تهران رو‌ انجام دادم و یک بار از map و داخل اون از usepap استفاده کردم حالا میخوام اصفهان رو هم اصافه کنم ابتدا تونستم از سایت imagemap مختصات شهر اصفهان رو به دست بیارم فقط نمیدونم باید یه usemap دیگه تعریف کنم یا چی؟

    1. سلام فاطمه،
      نه نیازی نیست. فقط باید از یک تگ area دیگه اضافه کنی و اون تگ رو داخل تگ map اصلیت قرار بدی. اگر میخوای چند نقطه مختلف رو انتخاب کنی فقط کافیه با تگ area بخش های مختلف رو مشخص کنی و پایان.

      موفق باشی.

    1. سلام شیرین. متوجه سوالت نشدم. از تگ متن که در محتوای متنی استفاده نمیکنند.

      1. من میخوام این مپ تگ برای متن بنویسم یعنی به محتوا متنی اشاره کنم اما نمیدونم چطوری بنویسمش؟😟😟 ولی میدونم که میشه ایجادش کرد

        1. شیرین عزیز لطفا نمونه ای از چیزی که مد نظرته برامون بفرست. من واقعا متوجه منظورت نمیشم.

  5. سلام.تو سایت image-map.net در قسمت تایتل و لینک و تارگت چی باید بنویسیم؟؟؟

    1. سلام روز بخیر

      برای قسمت تایتل – عنوانی که میخواین وقتی موس روی اون قسمت قرار بگیره و نمایش داده بشه رو وارد میکنین.
      قسمت لینک – لینک صفحه ای که پس از کلیک بر اون قسمت باز میشه رو انتخاب میکنین.
      تارگت هم نوع عملی هست که پس از کلیک اتفاق میوفته مثلا blank در یک صفحه جدید لینک باز میشه.

      امیدوارم به جوابت رسیده باشی. بازم سوالی داشتی بگو من درخدمتم.

  6. سلام وقتتون بخیر لطف میکند بیشتر راهنمایی کنید کد رو ک÷ی کردم در قسمت html سایت حتما باید دوباره عکس رو انتخاب کنم و این کد رو بهش اضافه کنم یا نه ممنون از راهنماییتون

    1. سلام وقت شما بخیر باشه. متاسفانه سوال شما برای بنده واضح نیست و متوجه نشدم.

    2. سلام وقت شما هم بخیر.
      وقتی کدی که از سایت image-map دریافت میکنین، همون کد رو میتونین در صفحهاتتون استفاده کنید.

      امیدوارم به جوابت رسیده باشی. اگر بازم سوال داشتی بگو من در خدمتم.

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

        1. سلام وقت شما هم بخیر.

          حقیقتا من درست متوجه سوالتون نشدم. ولی صد در صد یک جای کار کد هاتون رو اشتباه وارد میکنید.

          1. میتوانم کدها رو براتونبفرستم نگاه کنیدببینید کجاش مشکل داره ممنون

      1. سلام میخواستم بدونم مختصاتو چجوری باید بدست بیارم؟ چجوری اون عددها بدست میاد؟ ممنون

        1. سلام فرشاد ، داخل مقاله یک ابزار معرفی کردیم برای مختصات ، از اون استفاده کنی خیلی راحت تر هست کارت.

دیدگاهتان را بنویسید

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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