آموزش ساخت image map در html

با سلام و دورود میگنم خدمت تمام همراهان همیشگی وب سایت سون ریپلای در خدمت شما هستم با آموزش html  و css  ؛
امروز با آموزش بسیار کاربردی image map یا همان آموزش تگ map در html در خدمت شما عزیزان هستیم ،
در این پست تمامی مواردی که مربوط به تک map میشود و کاربرد آن را در طراحی سایت به شما آموزش خواهیم داد ، پس با ما در ادامه مطلب همراه باشید .

آموزش html – آموزش ساخت image map در html

تگ map یا ( مَپ ) تگی است که با استفاده از آن می توان یک نقشه ی تصویری یا Image-Map را در یک صفحه وب ایجاد کرد.

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

ابتدا تصویر را به وسیله تگ img در صفحه وب خود نشان می دهیم و به آن صفت usemap=”#id” را اضافه می کنیم و یک نام برای id تصویر خود قرار می دهیم.

نکته : توجه کنید قبل از نام آیدی حتما باید از علامت شارپ (#) استفاده کنید.

اکنون زمان نوشتن تگ map است. این تگ شامل opening tag و closing tag است که به آن یک صفت name می دهیم تا عکس نقشه خود را به تگ map اتصال دهیم

ما در تگ map  از تصویر زیر استفاده کردیم

آموزش html – معرفی تگ map در html  تگ map چیست ؟

به طور معمول تگ ها در زبان html دستوراتی هستند که توسط آن طراحی سایت انجام میشود ،
اما تگ map در جا هایی کاربرد دارد که ما نیاز داریم نقشه تصویری طراحی کنیم ! یعنی چه ؟
یعنی ما یک تصویر یا عکس داریم که در آن بخش های مختلفی وجود دارد که ما میخواهیم به یک عکس چندین لینک پیوند کنیم .
برای استفاده از تگ map در طراحی سایت به تگ های دیگری نیاز داریم که به آنها تگ داخلی میگوییم و یکی از مهمترین آنها تگ area هست
که کاره این تگ تعیین موقعیت لینک روی تصویر ما میباشد که اگر روی این موقعیت
از عکس کلیک شد کاربر به کدام صفحه از سایت هدایت شود!برای استفاده از این تگ باید از usemap استفاده کنیم
که میتوانیم برای مقدار usemap در تگ <img> از یک Name یا یک Id دلخواه و متفاوت استفاده کنیم که در بالا یک توضیح کوتاه دادیم.

ویژگی usemap در تگ img

ویژگی هایی که پیشتر گفتیم معمولا برای اغلب تصاویر در صفحات وب کفایت می کنند،
اما برای ایجاد قابلیت های تعاملی بیشتر در صورت نیاز می توانیم از خاصیت usemap و تگ های map و area برای تعریف نقاط قابل کلیک در تصویر استفاده کنیم،
گاهی نیاز است که بیش از یک لینک را در تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از قابلیت ها با خاصیت usemap در تگ img بر روی تصاویر قابل اعمال هستند،
به طور مثال:

نکته مهم در این حالت استفاده درست از شکل اشیاء و نحوه مقداردهی محدوده ای از تصویر است که می خواهیم قابل کلیک شدن باشد، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند:

همچنان درون تگ های تگ area :

درون تگ shape

توضیح : این تگ شکل مکانی لینک ما را تعیین میکند که برای انتخاب شکل مورد نظر از قبیل “دایره، مربع و مستطیل” میتوانید از مقادیر زیر استفاده کنید .

نحوه تنظیم مقادیر area در تگ map

خصوصیت Shape و Coords

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

شکل circle یا دایره:

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

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

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

نمونه کد به صورت زیر است.

شکل Poly یا چند ضلعی

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

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

شکل rect یا مربع/مستطیل:

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

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

شکل Poly یا چند ضلعی

آموزش ساخت image map در html

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

این مثال دوم بود که بهتر درک کنید چند ضلغی را به همین دلیل یک مثال دیگه هم استفاده کردم تا بهتر درک کنید.

آموزش html – کلام آخر

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

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