ناحیه نقشه (area)
تگ «ناحیه نقشه (area)» بخش های قابل کلیک تصویر را مشخص می کند. «نقشه تصویر (Image Map)» یعنی یک عکس با چند نقطه لینک دار. همیشه تگ های <area> داخل نقشه (map) قرار می گیرند.
نحوه اتصال به تصویر
ویژگی usemap در تصویر (img) باید با ویژگی name در نقشه (map) یکسان باشد. این ارتباط، تصویر را به نواحی متصل می کند.
نمونه کامل با چند ناحیه
<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>
نمونه دیگر با شکل های مختلف
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
ویژگی های کلیدی تگ area
shape: شکل ناحیه؛rect،circle،poly، یاdefault.coords: مختصات ناحیه؛ بسته به نوع شکل تغییر می کند.href: مقصد لینک؛ مثل یک پیوند (a).alt: متن جایگزین؛ برای دسترس پذیری ضروری است.
سه گام عملی ساخت نقشه تصویر
- یک عکس بگذار و
usemapبده. - یک map با
nameمنحصربه فرد بساز. - برای هر بخش، یک
<area>باshapeوcoordsتعریف کن.
نکته: برای دقت مختصات، اندازه تصویر ثابت باشد. تغییر اندازه، مختصات را به هم می زند.
هشدار: همیشه alt را پر کن. کاربران با خواننده صفحه به آن نیاز دارند.
جمع بندی سریع
<area>فقط داخل<map>می آید.usemapباnameباید یکسان باشد.shapeنوع ناحیه را تعیین می کند.coordsمختصات کلیک را مشخص می کند.