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

با نقشه های تصویر HTML، شما می توانید مناطق قابل کلیک روی یک تصویر ایجاد کنید.

 

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

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

<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>
امتحان کنید

 

تصویر

تصویر با کمک تگ <img> درج می شود. تنها تفاوت در این است که باید ویژگی usemap را هم استفاده کنید.

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

 

مقدار usemap با یک هشتگ # و به دنبال آن نام نقشه تصویر شروع می شود و برای ایجاد رابطه بین تصویر و نقشه تصویر استفاده می شود.

 

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

پس از مراحل بالا باید عنصر <map> را اضافه کنید.

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

<map name="workmap">

 

ویژگی name باید با ویژگی های <img> و usemap مقدار یکسانی داشته باشد.

 

مناطق

بعد از آن باید مناطق قابل کلیک را اضافه کرد.

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

 

شکل

شما باید شکل منطقه قابل کلیک کردن را تعریف کنید و برای این کار از مقادیر زیر می توانید کمک بگیرید.

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

 

شکل مستطیل قابل کلیک

مختصات برای "shape="rect به صورت جفت نوشته می شوند. یکی برای محور x ها و دیگری برای محور y ها.

پس مختصات 34,44 برای نشان دادن مختصات 34 پیکسل از حاشیه سمت چپ و 44 پیکسل از بالا استفاده می شود.



مختصات 270,350 یعنی 270 پیکسل از سمت چپ و 350 پیکسل از بالا.



با این داده ها می توان یک منطقه مستطیلی قابل کلیک ایجاد کرد.

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
امتحان کنید

 

این منطقه ای است که قابل کلیک می باشد و کاربر را به مقصد href هدایت خواهد کرد.



شکل دایره قابل کلیک

برای ایجاد منطقه دایره قابل کلیک، باید ابتدا مختصات مرکز دایره را پیدا کرد.

337,300



سپس شعاع دایره را مشخص می کنید:

44 پیکسل

با این داده ها شما قادر به ساخت یک منطقه دایره ای قابل کلیک خواهید بود.

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
امتحان کنید

 

این منطقه قابل کلیک دایره ای شما را به مقصد href هدایت خواهد کرد.

 

منطقه قابل کلیک چند ضلعی

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

این قابلیت می تواند برای ایجاد هر شکلی مورد استفاده قرار گیرد. حتی شکل یک کیک کروسان!

برای مثال کیک کروسان زیر را می خواهیم به یک منطقه قابل کلیک تبدیل کنیم.

برای این کار باید مختصات X و Y را برای تمام لبه های کروسان پیدا کنیم.

مختصات به صورت جفت ( یکی برای محور X ها و دیگری برای محور Y ها ) به کار می رود.

<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">
امتحان کنید

 

این منطقه ای است که قابل کلیک می باشد و کاربر را به صفحه href هدایت می کند.

 

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

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

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

در این مثال ما با استفاده از ویژگی onclick برای اجرای یک تابع جاوا اسکریپت با کلیک روی منطقه استفاده می کنیم:

<map name="workmap">

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

</map>




<script>

function myFunction() {

  alert("You clicked the coffee cup!");

}

</script>
امتحان کنید