در اين بخش از
دوره آموزش HTML در آموزش دون
، با تگ
<map> آشنا ميشويم. اين تگ براي تعريف نقشههاي تصويري (image maps) استفاده ميشود تا
بخشهاي مختلف يک تصوير به لينکها يا عملکردهاي متفاوت متصل شوند.
تگ map در HTML چيست؟
تگ <map> مجموعهاي از مناطق قابل کليک روي يک تصوير را تعريف ميکند. هر منطقه با تگ
<area> مشخص ميشود و ميتوان لينک يا عملکرد خاصي براي آن تعيين کرد.
مثال ساده از تگ map
<img src="world-map.png" alt="نقشه جهان" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="asia.html" alt="آسيا">
<area shape="circle" coords="477,300,44" href="africa.html" alt="آفريقا">
</map>
در اين مثال، تگ <map> با نام worldmap تعريف شده و مناطق مختلف تصوير با
<area> مشخص شدهاند.
ويژگيهاي مهم تگ map
| ويژگي | توضيح |
|---|---|
| name | نام نقشه که توسط usemap تصوير ارجاع داده ميشود |
| id / class | اعمال استايل CSS يا شناسه يکتا |
ويژگيهاي مهم تگ area در نقشه تصوير
shape: شکل منطقه (rect, circle, poly, default)coords: مختصات منطقه روي تصويرhref: آدرس مقصد لينکalt: متن جايگزين براي دسترسي بهترtarget: تعيين محل باز شدن لينک (مثلاً _blank)
نکات مهم درباره map
- تگ
<map>هميشه بايد داراي نام باشد و با ويژگيusemapتصوير مرتبط شود. - تگ
<area>مناطق قابل کليک را تعريف ميکند و ميتواند لينک يا رويدادهاي جاوااسکريپت داشته باشد. - به بهبود تجربه کاربري و دسترسي کمک ميکند، مخصوصاً براي نقشهها و تصاوير تعاملي.
براي يادگيري کامل کار با تصاوير و تعاملات تصويري در صفحات وب، پيشنهاد ميکنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.
براي مشاهده تمام آموزشهاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.
آموزش قبلي: تگ main در HTML
آموزش بعدي: تگ mark در HTML
دیدگاه و پرسش