How to Use <map> Tag
Today we will learn how to use <map> tags. Map tags can be used to link a specific part of an image or to link a different part of an image. Which is used in the under <area> elements of the <map> tag.
Table of Contents
How to use Map Tag in image
How to use a map tag is very easy I will explain to you step by step I think after seeing this you will come up with an idea of how to use a map tag
1. Copy this Code and Paste your page
<img src="" usemap="">
<map name="">
<area target="" alt="" title="" href="" coords="" shape="">
</map>Note:- You must add the src=” “ location of the img tag. Give an id in the usemap. Now enter the id given under the name=” “ in the map tag here.
Example:-
<img src="example.jpg" usemap="#demo">
<map name="#demo">
<area target="" alt="" title="" href="" coords="" shape="">
</map>
Note:- Crude Code You can also create any code you like from an online website such as Photoshop, Paint, or image-map.net In this blog, I will explain how to use online
2. https://www.image-map.net/ Open this website and upload the image in which you want to use the map tag.
step1:- Click This Button Select Image Frome My PC
step2:- Select Area and scroll the page then Click Show Me The Code Button
Step3:- Copy coords Code and Paste your HTML file.
Step4:-
<img src="http://www.myprograming.com/wp-content/uploads/2021/07/example.jpg" usemap="#demo">
<map name="#demo">
<area target="" alt="" title="" href="" coords="476,399,884,738" shape="rect">
</map><map> Tag Live Example
How to Multiple areas select in a map tag
Note:- Add extra are elements and create coords code then paste.
<img src="http://www.myprograming.com/wp-content/uploads/2021/07/example.jpg" usemap="#demo">
<map name="#demo">
<area target="" alt="" title="" href="" coords="476,399,884,738" shape="rect">
<area target="" alt="" title="" href="" coords="85,466,376,724" shape="rect">
<area target="" alt="" title="" href="" coords="974,450,1288,703" shape="rect">
</map>How to add Link in <map> Tag
add href link and target=”_blanck”
<img src="http://www.myprograming.com/wp-content/uploads/2021/07/example.jpg" usemap="#demo">
<map name="#demo">
<area target="_blanck" alt="" title="" href="https://wa.me/+918866851995" coords="476,399,884,738" shape="rect">
<area target="_blanck" alt="" title="" href="https://www.instagram.com/myprograming/" coords="85,466,376,724" shape="rect">
<area target="_blanck" alt="" title="" href="https://www.facebook.com/Myprograming1" coords="974,450,1288,703" shape="rect">
<area target="_blanck" alt="" title="" href="https://www.youtube.com/channel/UCiEycp2dVZs-kB3B3ANTw3g" coords="896,62,1270,331" shape="rect">
<area target="_blanck" alt="" title="" href="https://www.myprograming.com/" coords="0,3,500,177" shape="rect">
</map>
