- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
An Image map is a special type of image that is broken into various hotspots and each hotspot takes you to a different file. Hotspots are nothing but clickable areas upon images that are created by a user with the help of the <area> tag. This type of map is also called a client-side image map as the map is embedded in the HTML itself.
The first step is to insert an image using the <imggt; tag. Once the image is inserted we will use an additional attribute i.e. usemap with a value that starts with #. The value of the usemap is followed by the name of the map after the #.
<img src="map.jpg" alt="sample" usemap="#mymap" width="600" height="400">
Once the usemap is created we insert the image map using the <map> tag. This will create a map that is linked to the image using the required name attribute. The name attribute value must be the same as given in the usemap attribute of the <img> tag.
To create different clickable areas, we have used the tag <area>. We must define the shape of each area. The different shapes can be a rectangle, circle, and polygon. The coordinates of the area should also be defined and href is the link that will be opened when the user clicks upon the area.
<area shape="rect" coords="x,y,x,y" href=""> <area shape="circle" coords="x,y,r" href=""> <area shape="poly" coords="" href="">
Now for finding the coordinate of an image.
Rectangle image will be defined with length and breadth i.e. x1, x2, y1,y2. The x1 and y1 define the coordinates on the top left corner and x2, y2 define the coordinates of the bottom right as shown in the image.
Circle image will be defined with radius and center of the circle i.e. x, y, r where x, y defines the coordinates for the center and r defines the radius of the circle.
Polygon image will be defined with the coordinates x1, y1, x2, y2, x3, y3, x4, y4, … where x, y defines the coordinates of one of the corners of the polygon.
In the example below, we create image map of rectangle, circle and a rhombus.
- How do we create an image map in HTML?
- How to specify an image as a client-side image-map in HTML?
- How to create an unmodifiable map in Java?
- Set an image as a server-side image map in HTML?
- How do we define an area in an image map with HTML?
- How to create an image gallery with CSS
- How to create an avatar image with CSS?
- How to create clickable areas in an image in HTML?
- How can we create an unmodifiable Map in Java 9?