Create Multiple links In An Image – Dreamweaver…!

Image Links

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="http://www.google.com/" target="_blank"  alt="google" title="Google" />
<area shape="circle" coords="209,157,49" href="http://www.yahoo.com/" target="_blank"  alt="yahoo" title="Yahoo" />
<area shape="poly" coords="302,99,386,141,355,223,304,181" href="http://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:

Untitled Document
imagelinks google yahoo bing




Previous
Next Post »