آموزش تگ map در html

  • ۹ مرداد ۱۳۹۵
  • 786 نفر
  • ۴ دیدگاه
  • پدرام کامیاب راد
 
1 Star2 Stars3 Stars4 Stars5 Stars

آموزش تگ map در html

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

آموزش تگ map در html

آموزش تگ map در HTML – تگ map چیست ؟

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

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

درون تگ shape

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

مقادیر مورد استفاده تگ SHAPE :

  •  مربع و مستطیل : rect , rectangle
  •  دایره و بیضی : circ , circle
  •  مربع و مستطیل :poly , polygon

 

درون تگhref

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

  • مقدار “href=”URL  که در قسمت URL باید آدرس لینک خود را وارد نمایید.

 

درون تگ nohref

توضیح : این تگ در مواقعی بکار میرود که شما میخواهید لینک داده شده به تصویر را به صورت موقت فعال یا غیر فعال کنید.

  • – مقدار true : در این منطقه لینک فعال و قابل کلیک است !
  • – مقدار false : در این منطقه لینک غیر فعال و غیر قابل کلیک است !

 

درون تگ target

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

  • – مقدار _blank : هدایت کاربر به Tab جدید و باز کردن لینک در پنجره جدید .
  • – مقدار_parent : با انتخاب این مقدار پس از کلیک کاربر بر روی لینک ، در قاب اصلی باز میشود.
  • – مقدار _top : پس از کلیک ، لینک در همین صفحه کامل باز خواهد شد..
  • – مقدار _self : پیوند در همان پنجره یا قابی که کلیک شده است باز میشود .

 

درون تگcoords

توضیح : در تگ coords ما موقعیت مکانی لینک در تصویر را به صورت دقیق توسط مقادیر موجود در تگ shape تنظیم و ثبت میکنیم .

  • تگ rect : مربع یا مستطیل ، برای تعیین موقعیت هر چهار نقطه وجه های مختلف
    coords =left,top,right,bottom
  • تگ circ : دایره ، جهت تعیین نقطه مرکز دایره و شعاع آن
    coords=center X, center Y ,radius
  • تگ poly : چند ضلعی ، مشخصات مکانی انواع نقاط مختلف شکل چند ضلعی
    coords = X1 Y1, X2 Y2, … , Xn Yn

 

خط جداکننده

نمونه کد :

 

در بخش نظرات میتوانید سوالات یا مشکلات خود در راه اندازی یک image map html در طراحی سایت خود را بیان کنید و پاسخ خود را دریافت نمایید .

توصیه نویسنده به شما : مشاهده مطلب “ آموزش نوشتن متن روی تصویر در html

شاد و پیروز باشید

 

 

واقعا کاربردی و آموزنده و مفید بود.
ممنونم ازتون.
دست مریزاد.

بسیار مطلب کامل و مفیدی بود ممنون

کوهی ۲/۰۹/۱۳۹۵ پاسخ دهید

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

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

تارنما سازان وب پارس درگاه پرداخت واسط پی پکس لول رنگ - پالت رنگ های مورد تایید آی وحید تاتسی | tutsi فروشگاه قالب اختصاصی تمی

FB google plus