با استفاده از Image Map شما می توانید نقاط قابل کلیکی بر روی تصویر ایجاد کنید.
Image Map (نقشه تصویری)
برای تعریف یک نقشه بر روی تصویر باید از تگ < map > استفاده شود. یک image map تصویری با نقاط قابل کلیک می باشد. این نقاط با یک یا چند تگ < area > روی تصویر تعریف می شوند. مثال زیر نحوه انجام این کار را نمایش می دهد.
ما در ادامه به توضیح این مثال و نحوه کارکرد Image Map می پردازیم.
خروجی مثال بالا به شکل زیر است. اگر شما بر روی محدوده لپ تاپ روی تصویر کلیک کنید به صفحه دیگری منتقل می شوید.
بعد از کلیک بر روی ناحیه لپ تاپ شما به صفحه computer.html منتقل می شوید.
حال اگر بر روی محدوده لیوان قهوه کلیک کرده باشید وارد صفحه coffee.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 به تصویر مورد نظر لینک می شود.
ویژگی 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 گوشه بالا سمت چپ لپ تاپ را مشخص می کند.
و مقدار 270 و 350 گوشه پایین سمت راست لپ تاپ را مشخص می کند.
حال اگر بر روی محدوده لپ تاپ در تصویر قرار بگیرید خواهید دید که به حالت لینک در آمده و با کلیک بر روی آن به صفحه computer.html منتقل می شوید.
Shape="circle" (شکل دایره ای)
برای مشخص کردن مختصات به صورت دایره‌ای از طریق ۳ متغیر طول ، عرض و شعاع (x,y,r) اقدام می‌کنیم.
متغیرهای x و y محل دقیق مرکز دایره را مشخص می‌کنند و متغیر r نیز شعاع دایره را مشخص میکند. بنابراین پس از مشخص کردن متغیر ها ما دایره‌ای به شعاع r و به مرکزیت x و y خواهیم داشت. دستور زیر الگوی انجام این کار را نشان می دهد:
(coords=height,width,radius – coords=x,y,r)
در دستور بالا مقدار 337 و 300 مرکز دایره را تعیین می کنند.
و مقدار 44 شعاع دایره را مشخص می کند.
الان اگر شما بر روی محدوده انتخاب شده در تصویر زیر کلیک کنید به صفحه coffee.html منتقل خواهید شد.
Image Map و جاوا اسکریپت
یک محیط قابل کلیک شدن همچنین می تواند یک تابع جاوا اسکریپت را هم به کار بیاندازد.
برای اجرای یک تابع جاوا اسکریپت یک رویداد click به عنصر < area > اضافه کنید. تصویر زیر نحوه انجام این کار را نشان می دهد:
