نقشه تصویر (Image Map)
با «نقشه تصویر HTML»، می توان روی بخش های تصویر کلیک کرد. «نقشه تصویر (Image Map)» یعنی یک تصویر با ناحیه های قابل کلیک. هر «ناحیه (Area)» مثل دکمه های روی عکس است. الان ساده و قدم به قدم می سازیم.
ایجاد نقشه تصویر HTML
ابتدا تصویر را با ویژگی usemap وصل کنید. سپس یک تگ <map> با name بسازید. بعد هم با <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>
چطور کار می کند؟
با کلیک روی بخش های مختلف تصویر، کارهای متفاوت انجام می شود. پس تصویر لازم است و کدی که ناحیه های کلیک را توضیح دهد.
تصویر با usemap
فقط کافی است به تگ تصویر، ویژگی usemap بدهید. مقدار آن با # شروع می شود و به نام نقشه وصل می شود.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
نکته: هر تصویری می تواند نقشه تصویر باشد.
ساخت map و اتصال نام
تگ <map> را اضافه کنید. ویژگی name باید با مقدار usemap یکی باشد.
<map name="workmap">
تعریف ناحیه ها با area
تگ <area> ناحیه کلیک پذیر را می سازد. «شکل (Shape)» با ویژگی shape مشخص می شود: rect، circle، poly یا default. همچنین «مختصات (Coordinates)» با coords تعیین می شود.
شکل rect و مختصات جعبه ای
برای rect چهار عدد می دهید: دو گوشه مخالف مستطیل. اول x و y گوشه بالا-چپ، سپس x و y گوشه پایین-راست.
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
شکل circle و شعاع
برای circle سه عدد می دهید: x مرکز، y مرکز، و شعاع.
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
شکل poly و چندضلعی ها
برای poly جفت های 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">
رویداد با JavaScript روی area
می توانید با رویداد onclick یک تابع جاوااسکریپت اجرا کنید.
<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>
گام های عملی ساخت نقشه تصویر
- تصویر را با
usemapبه نام نقشه وصل کنید. - تگ
<map>را باnameبسازید. - برای هر بخش، یک
<area>باshapeوcoordsبدهید.
جمع بندی سریع
- نام
mapو مقدارusemapیکسان باشد. - rect چهار عدد، circle سه عدد می خواهد.
- poly با جفت های x,y شکل می سازد.
- می توانید با
onclickکار انجام دهید.