map
Spread the love

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.

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="https://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="https://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="https://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>

Live Example Image Maps



Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *