آموزش تگ map در html

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

آموزش تگ 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

نمونه کد :

< img src="../Pic/TagsList.jpg" alt="learner" usemap="#taglist" />
< map id="taglist" >
    < area id="table" alt="table tag" shape="rect" coords="1, 2, 194, 122" href="HtmlTable1.aspx" />
    < area id="body" alt="body tag" shape="rect" coords="194, 0, 386, 119" href="basictags1.aspx" />
    < area id="link" alt="link tag" shape="rect" coords="0, 121, 193, 242" href="HtmlLinks2.aspx" />
    < area id="p" alt="p tag" shape="rect" coords="192, 119, 386, 242" href="textformat1.aspx" />
< /map >

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

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

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