نقشه‌های تصویری

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

با نقشه‌های تصویری، می‌توان بخش‌های قابل کلیک کردن به یک تصویر اضافه کرد.[۱]

نقشه های تصویری (به انگلیسی: Image Maps)

تگ <map> یک image-map (به فارسی: نقشه تصویری) را تعریف می‌کند. یک نقشه تصویری، تصویری با ناحیه قابل کلیک کردن است.

در تصویر زیر برروی کامپیوتر، موبایل، یا فنجان قهوه کلیک کنید:

Workplace Computer Phone Cup of coffee

مثال

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 در نقطه ۳۴ پیکسل از حاشیه چپ و ۴۴ پیکسل از بالا قرار دارد:

Workplace

مختصات 270, 350 در نقطه ۲۷۰ پیکسل از حاشیه چپ و ۳۵۰ پیکسل از بالا قرار دارد:

Workplace

حال داده‌های کافی برای ایجاد یک ناحیه مستطیلی قابل کلیک کردن را داریم:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">


مشاهدهٔ نتیجه


این ناحیه‌ای است که قابل کلیک کردن می‌شود و کاربر را به صفحه computer.htm می‌برد:

Workplace

دایره

برای ایجاد ناحیه دایره ای، ابتدا مختصات مرکز دایره را مشخص می‌کنیم:

337, 300

Workplace

سپس شعاع دایره را تعیین می‌کنیم:

44 pixels

Workplace

حال داده‌های کافی برای ایجاد یک ناحیه دایره ای قابل کلیک کردن را داریم:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">


مشاهدهٔ نتیجه


این ناحیه‌ای است که قابل کلیک کردن می‌شود و کاربر را به صفحه coffee.htm می‌برد:

Workplace

تصویر نقشه ای و جاوا اسکریپت

یک ناحیه قابل کلیک کردن نباید حتماً لینکی به صفحه دیگر باشد، می‌تواند یک تابع جاوا اسکریپتی را هم فعال کند:

یک رویداد click به عنصر <area> اضافه کنید تا یک تابع جاوا اسکریپت را فعال کند:

مثال

می‌توانید از ویژگی onclick برای اجرای تابع جاوا اسکریپت هنگام کلیک برروی ناحیه استفاده کنید

<area shape="circle" coords="337,300,44" onclick="myFunction()">


مشاهدهٔ نتیجه


خلاصه بخش

  • استفاده از عنصر <map> برای تعریف یک نقشه تصویری
  • استفاده از HTML <area> برای تعریف نواحی قابل کلیک کردن در نقشه تصویری
  • استفاده از ویژگی usemap مربوط به عنصر HTML <img> برای اشاره به یک نقشه تصویری


منابع آموزشی