100% کامل شده تا

نقشه‌های تصویر در اچ‌تی‌ام‌ال (HTML Image Maps)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

با استفاده از نقشه‌های تصویری در HTML، می‌توانید مناطق قابل کلیک روی یک تصویر را ایجاد کنید.[۱]

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

تگ <map>در HTML، یک نقشهٔ تصویر را تعریف می‌کند. یک نقشه تصویری، تصویری با ناحیه قابل کلیک کردن است. مناطق با یک یا چند تگ <area> تعریف می‌شوند.

سعی کنید روی رایانه، تلفن یا فنجان قهوه در تصویر زیر کلیک کنید:

Responsive demo.svg


مثال

در اینجا سورس کد HTML، برای نقشهٔ تصویر بالا آمده‌است:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>


چگونه کار می‌کند؟ (How Does it Work?)

ایدهٔ پشت نقشه تصویر این است که بسته به جایی که روی تصویر کلیک می‌کنید، باید بتوانید اقدامات متفاوتی را انجام دهید.

برای ایجاد یک نقشهٔ تصویری به یک تصویر و تعدادی کد HTML نیاز دارید که مناطق قابل کلیک را توصیف می‌کند.


تصویر (The Image)

تصویر با استفاده از تگ <img> اضافه می‌شود. تنها تفاوت آن نسبت به تصاویر دیگر این است که باید یک ویژگی usemap اضافه کنید: 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">


مقدار usemap با یک برچسب #، آغاز می‌شود و در ادامه آن نام نقشه تصویری قرار دارد و برای ایجاد رابطه بین تصویر و نقشه تصویری استفاده می‌شود.

نکته: می‌توانید از هر تصویری بعنوان نقشه تصویر استفاده کنید.


ایجاد نقشهٔ تصویر (Create Image Map)

سپس یک عنصر <map> اضافه کنید.

عنصر <map> برای ایجاد نقشهٔ تصویر استفاده می‌شود و با استفاده از ویژگی name مورد نیاز به تصویر پیوند داده می‌شود: 

<map name="workmap">


مقدار ویژگی name باید با مقدار ویژگی usemap برابر باشد.

مناطق (The Areas)

سپس مناطق قابل کلیک را اضافه کنید.

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


شکل (Shape)

شما باید شکل مناطق قابل کلیک را مشخص کنید و می‌توانید یکی از این مقادیر را انتخاب کنید:

  • rect - یک ناحیه مستطیل شکل را تعریف می‌کند
  • circle - یک منطقهٔ دایره‌ای را تعریف می‌کند
  • poly - یک منطقهٔ چند ضلعی را تعریف می‌کند
  • default - کل منطقه را مشخص می‌کند

Shape="rect"

مختصات shape="rect" به صورت جفت، یکی برای محور x و دیگری برای محور y آمده‌است.

بنابراین، مختصات 34, 44 در نقطه، ۳۴ پیکسل از حاشیه چپ و ۴۴ پیکسل از بالا قرار دارد:

Workplace


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

Workplace


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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Responsive demo.svg


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

Workplace


Shape="circle"

برای افزودن ناحیهٔ دایره، ابتدا مختصات مرکز دایره را پیدا کنید:

337,300

Workplace


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

44 پیکسل

Workplace


اکنون اطلاعات کافی برای ایجاد یک ناحیهٔ دایره‌ای قابل کلیک در اختیار دارید:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Responsive demo.svg


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

Workplace


Shape="poly"

shape="poly" شامل چندین نقطه مختصات است که شکل ایجاد شده با خطوط مستقیم (چند ضلعی) را ایجاد می‌کند.

این روش می‌تواند برای ایجاد هر شکلی استفاده شود.

مثلاً شاید شکل کروسانت (نوعی از نان شیرین)!

چگونه می‌توانیم کروسانت در تصویر زیر را تبدیل به پیوند قابل کلیک کنیم؟

ما باید مختصات x و y را برای همهٔ لبه‌های کروسانت پیدا کنیم:

  • Frenchfood.jpg

مختصات به صورت جفت، یکی برای محور x و دیگری برای محور y آمده‌است:

  • Frenchfood4.jpg

مثال

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>

<img src="frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">

<map name="foodmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

Responsive demo.svg


این ناحیه، قابل کلیک کردن است و کاربر را به صفحهٔ "croissant.htm" می‌برد:

  • Frenchfood3.jpg


نقشهٔ تصویر و جاوااسکریپت (Image Map and JavaScript)

یک ناحیهٔ قابل کلیک نیز می‌تواند یک تابع جاوااسکریپت را فعال کند.

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

مثال

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

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

function myFunction() {
  alert("You clicked the coffee cup!");
}

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

</body>
</html>

Responsive demo.svg


خلاصهٔ بخش (Chapter Summary)

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


برچسب‌های تصویر در اچ‌تی‌ام‌ال (HTML Image Tags)

منابع آموزشی

  1. ↑ w3schools.com: HTML Image Maps


به‌روزرسانی شده: ۵ روز پیش


برگرفته از «https://wikicod.ir/w/index.php?title=HTML:Tutorial/تصاویر/نقشه_های_تصویری&oldid=30774»