🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

آموزش Image Map در HTML

در این مقاله در ادامه مباحث یادگیری طراحی سایت، به آموزش ساخت Image Map (نقشه تصویری) در HTML می پردازیم.

آموزش Image Map در HTML

با استفاده از Image Map شما می توانید نقاط قابل کلیکی بر روی تصویر ایجاد کنید.

Image Map (نقشه تصویری)

برای تعریف یک نقشه بر روی تصویر باید از تگ < map > استفاده شود. یک image map تصویری با نقاط قابل کلیک می باشد. این نقاط با یک یا چند تگ < area > روی تصویر تعریف می شوند. مثال زیر نحوه انجام این کار را نمایش می دهد.

ما در ادامه به توضیح این مثال و نحوه کارکرد Image Map می پردازیم.

آموزش طراحی سایت

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

آموزش HTML

بعد از کلیک بر روی ناحیه لپ تاپ شما به صفحه computer.html منتقل می شوید.

آموزش Image Map در HTML

حال اگر بر روی محدوده لیوان قهوه کلیک کرده باشید وارد صفحه coffee.html خواهید شد.

آموزش نقشه تصویری در HTML

اما Image Map چگونه کار می کند؟

ایده پشت image map این است که شما قادر باشید فعالیت های مختلفی بر اساس اینکه کجای تصویر کلیک می شود انجام دهید. برای ساخت یک image map شما به یک تصویر احتیاج دارید و چند کد که نقاط کلیک شدنی را تعریف کنند. برای ایجاد یک نقشه تصویری ما باید از تگ img برای ایجاد تصویر یا عکس مورد نظرمان استفاده نماییم و از تگ map و تگ area برای ایجاد نقاط قابل کلیک بر روی تصویر مورد نظر استفاده کنیم.

گام اول ایجاد تصویر با استفاده از تگ img

تصویر با استفاده از تگ < img > وارد صفحه HTML می شود و تنها فرق آن با تصاویر دیگر این است که باید یک ویژگی usemap به آن اضافه کنید. مقدار usemap با یک هشتگ (#) و سپس نام image map شروع می شود. usemap به منظور ساخت یک رابطه بین تصویر و نقشه تصویر (image map) به کار می رود.

آموزش طراحی سایت

گام دوم ساخت یک image map

در مرحله بعد باید یک عنصر < map > را به صفحه HTML خود اضافه کنید.

عنصر < map > به منظور ساخت یک image map به کار رفته و با استفاده از ویژگی name به تصویر مورد نظر لینک می شود.

آموزش HTML

ویژگی name باید مقداری مساوی با مقدار usemap تصویر داشته باشد.

گام سوم ایجاد نقاط قابل کلیک روی تصویر

در این مرحله می بایست نقاط کلیک شدنی ای را بر روی تصویر خود ایجاد کنیم. یک نقطه ی کلیک شدنی روی تصویر با استفاده ازعنصر < area > تعریف می شود.

تعیین شکل نقاط قابل کلیک روی تصویر با استفاده از خصوصیت shape

شما باید شکل نقاط کلیک شدنی روی تصویر را نیز مشخص کنید. خصوصیت shape شکل مکانی لینک ما را تعیین میکند و برای این منظور می توانید یکی از این مقادیر زیر را برای این خصوصیت به کار ببرید:

  • Rect – یک شکل مستطیلی شکل را تعریف می کند.
  • Circle – یک شکل دایره ای شکل را تعریف می کند.
  • Poly – یک شکل چند ضلعی را تعریف می کند.
  • Default – کل نقاط را تعریف می کند.

پس از آن شما همچنین باید یکسری مختصات را به منظور اینکه قادر باشید یک نقطه کلیک شدنی را به تصویر اضافه کنید تعریف کنید.

"Shape="rect (شکل مستطیل)

مختصات "Shape="rect دوتایی می باشد. یکی برای نمودار x و یکی برای نمودار y.

 (coords=left,top,right,bottom – croods=x1,y1,x2,y2)

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

آموزش طراحی سایت

در مثال بالا مقدار 34 و 44 گوشه بالا سمت چپ لپ تاپ را مشخص می کند.

آموزش HTML

و مقدار 270 و 350 گوشه پایین سمت راست لپ تاپ را مشخص می کند.

آموزش Image Map در HTML

حال اگر بر روی محدوده لپ تاپ در تصویر قرار بگیرید خواهید دید که به حالت لینک در آمده و با کلیک بر روی آن به صفحه computer.html منتقل می شوید.

آموزش طراحی سایت

Shape="circle" (شکل دایره ای)

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

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

(coords=height,width,radius – coords=x,y,r)

آموزش HTML

در دستور بالا مقدار 337 و 300 مرکز دایره را تعیین می کنند.

آموزش Image Map در HTML

و مقدار 44 شعاع دایره را مشخص می کند.

آموزش Image Map در HTML

الان اگر شما بر روی محدوده انتخاب شده در تصویر زیر کلیک کنید به صفحه coffee.html منتقل خواهید شد.

آموزش طراحی سایت

Image Map و جاوا اسکریپت

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

برای اجرای یک تابع جاوا اسکریپت یک رویداد click به عنصر < area > اضافه کنید. تصویر زیر نحوه انجام این کار را نشان می دهد:

آموزش HTML

آموزش طراحی سایت آموزش HTML آموزش Image map آموزش ساخت Image map آموزش نقشه تصویر در html