Create a New folder
Open Dreamweaver.
Create New html file and save it in the folder.
In Code view copy paste the below mention code:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="imagelinks.jpg" alt="imagelinks"
width="420" height="315" border="0"
usemap="#imagelinks" />
<map name="imagelinks"
id="imagelinks">
<area shape="rect"
coords="20,110,123,207" href="https://www.google.com/" target="_blank" alt="google" title="Google" />
<area shape="circle"
coords="209,157,49" href="https://www.yahoo.com/" target="_blank" alt="yahoo" title="Yahoo" />
<area shape="poly"
coords="302,99,386,141,355,223,304,181"
href="https://www.bing.com/" target="_blank" alt="bing"
title="Bing" />
</map>
</body>
</html>
Note: Replace the image name imagelinks.jpg with your image
name and copy paste the image in to the folder you have created before.
Then switch to design view.
You will see a Rectangle, Circle and a Polygonal. Drag and
resize them to match your image content. You can also resize your image simply
by dragging. Save the document.
Actually it will automatically update the co-ordinates of
the selection area in your image.
Now press F12 and preview your image with links on it.
Eg:
This is Kishore Siluvaikan K. Evergreen learner, I like to blog on the things which I learn from my everyday life. Human by Birth - Blogger by Interest...!
Sharing is caring - Sharing my knowledge here...!