Creating Image Maps

When a hyperlink is created on an image, you can open the Web page specified by the hyperlink. HTML also provides the facility to link multiple Web pages to a single image through image-maps. An image-map is a technique that divides the image into multiple sections and allows linking of each section to different Web pages. Linked regions of an image-map are called hot regions and each hot region is associated with an HTML file that is loaded when the hot region is clicked. Hot regions are specified by the shape attribute of the <area> tag. Which defines an area inside an image-map.

Let’s do the following steps to create image-map:


<!DOCTYPE html>
<html>
<head>
    <title> Image Maps</title>
</head>
<body>
    <img src=”C:\users\document\image.jpg” usemap=”#mymap” />
    <map name=”mymap”>
        <area shape=”polygon” cords=”19,44,45,11,87,37,82,76,49,98” href=”area1.html>
        <area shape=”rect” cords=”28,12,24,19” href=”area2.html>
        <area shape=”circle” cords=”23,21,23” href=”area3.html>
    </map>
</body>
</html>

Save the document with the name imagemap.html and open on browser.

Creating a Linked Page:


<!DOCTYPE html>
<html>
<head>
    <title>Aria 1 </title>
</head>
    <center>
    <h1> Aria 1</h1>
    <h2> you have clicked Area 1</h2>
    <img src=”image.jpg” alt=”My Image” /> 
    </center>
<body>
</html>

Save the document with the name of area1.html.

Open imagemap.html and move the mouse pointer over the different section of the image. When you move the mouse pointer over an image, the mouse pointer is converted into a hand-like shape. When you click on the image the referenced page opens.

PRV MENU NEXT

Creating Image Maps

Latest Post