Image Maps

Next Page Previous Page

Image mapping used to be very popular before but with time it has lost its charm, although we can use it today in just the right way and the right application. Image mapping is a very cool and interesting feature of HTML, with the help of the <map> tag we can divide the image into parts and each part will take you to a different page when you click on that.

Image mapping can be complicated for beginners, but with the right examples, we can understand it easily.

Elements: 

  • img - img here is the location of our image on the map. 
  • map -the map is the area on which the image will be placed.
  • area -the area will set those areas on the map which will be clickable.

Let us follow some simple steps to create an image map

Step 1: Setting the size of our image.

In our case, this image is 275 x 183, we can increase or decrease the size in the HTML document if we want.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Image Map </title>
	</head>
	<body>
		<img src="images.jpg" alt="image map example"  usemap="#map_example">
	</body>
</html>

Step 2: let’s create a map to overlay our image.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Image Map </title>
	</head>
	<body>
		<img src="images.jpg" alt="image map example"  usemap="#map_example">
		<map name="My-map">
		</map>

	</body>
</html>

Here is the map name is My_map, naming a map is important, we will need this in our next step.

Step 3: Defining the coordinates

Here we need to make three shapes, one polygon for our phone and another for the book, and the markers, to find the coordinates,

Here you go you will find the map coordinates successfully, copy the code. And paste in your file.

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now