نقشه‌های تصویری
با نقشه‌های تصویری، می‌توان بخش‌های قابل کلیک کردن به یک تصویر اضافه کرد.[۱]
نقشه های تصویری (به انگلیسی: Image Maps)
تگ <map> یک image-map (به فارسی: نقشه تصویری) را تعریف می‌کند. یک نقشه تصویری، تصویری با ناحیه قابل کلیک کردن است.
در تصویر زیر برروی کامپیوتر، موبایل، یا فنجان قهوه کلیک کنید:
مثال
1 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
2
3 <map name="workmap">
4 <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
5 <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
6 <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
7 </map>
چگونه کار می‌کند؟
ایدهٔ پشت نقشه تصویر این است که شما باید بسته به مکانی که در تصویر روی آن کلیک می‌شود، اقدامات مختلفی انجام شود.
برای ایجاد نقشه تصویری شما به یک تصویر نیاز دارد، و یک نقشه که شامل قوانینی باشد که نواحی قابل کلیک را مشخص می‌کند.
تصویر
تصویر با استفاده از تگ <img> اضافه می‌شود. تنها تفاوت نسبت به تصویرهای دیگر این است که باید ویژگی usemap اضافه شود:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
مقدار usemap با یک تگ # آغاز می‌شود و در ادامه آن نام نقشه تصویری قرار دارد و برای ایجاد رابطه بین تصویر و نقشه تصویری استفاده می‌شود.
نکته: می‌توانید از هر تصویری بعنوان نقشه تصویر استفاده کنید.
نقشه
سپس یک عنصر <map> اضافه می‌شود.
عنصر <map> برای ایجاد نقشه تصویری استفاده می‌شود و با استفاده از ویژگی name به تصویر لینک می‌شود:
<map name="workmap">
مقدار ویژگی name باید با مقدار ویژگی usemap برابر باشد.
توجه: می‌توان عنصر <map> را در هر مکان دلخواهی درج کرد، لازم نیست درست بعد از تصویر درج شود.
ناحیه ها
سپس نواحی قابل کلیک اضافه می‌شود.
یک ناحیه قابل کلیک کردن با استفاده از عنصر <area> مشخص می‌شود.
شکل
شکل ناحیه باید مشخص شود و می‌توان از بین مقادیر زیر انتخاب کرد:
rect- یک ناحیه مستطیلی تعریف می‌کند
circle- یک ناحیه دایرهٔ تعریف می‌کند
poly- یک ناحیه چندضلعی تعریف می‌کند
default- کل ناحیه را مشخص می‌کند
مختصات
باید مختصاتی تعریف کنیم تا بتواند ناحیه قابل کلیک شدن را در تصویر قرار دهد.
مختصات بصورت زوج هستند، یکی برای محور x و یکی برای محور y.
مختصات 34, 44 در نقطه ۳۴ پیکسل از حاشیه چپ و ۴۴ پیکسل از بالا قرار دارد:
مختصات 270, 350 در نقطه ۲۷۰ پیکسل از حاشیه چپ و ۳۵۰ پیکسل از بالا قرار دارد:
حال داده‌های کافی برای ایجاد یک ناحیه مستطیلی قابل کلیک کردن را داریم:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
این ناحیه‌ای است که قابل کلیک کردن می‌شود و کاربر را به صفحه computer.htm می‌برد:
دایره
برای ایجاد ناحیه دایره ای، ابتدا مختصات مرکز دایره را مشخص می‌کنیم:
337, 300
سپس شعاع دایره را تعیین می‌کنیم:
44 pixels
حال داده‌های کافی برای ایجاد یک ناحیه دایره ای قابل کلیک کردن را داریم:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
این ناحیه‌ای است که قابل کلیک کردن می‌شود و کاربر را به صفحه coffee.htm می‌برد:
تصویر نقشه ای و جاوا اسکریپت
یک ناحیه قابل کلیک کردن نباید حتماً لینکی به صفحه دیگر باشد، می‌تواند یک تابع جاوا اسکریپتی را هم فعال کند:
یک رویداد click به عنصر <area> اضافه کنید تا یک تابع جاوا اسکریپت را فعال کند:
مثال
می‌توانید از ویژگی onclick برای اجرای تابع جاوا اسکریپت هنگام کلیک برروی ناحیه استفاده کنید
<area shape="circle" coords="337,300,44" onclick="myFunction()">
خلاصه بخش
- استفاده از عنصر
<map>برای تعریف یک نقشه تصویری
- استفاده از HTML
<area>برای تعریف نواحی قابل کلیک کردن در نقشه تصویری
- استفاده از ویژگی
usemapمربوط به عنصر HTML<img>برای اشاره به یک نقشه تصویری
منابع آموزشی