-
Step 1
Open a document in Dreamweaver by either going to "File" and "New" or by opening an existing file that you have been working on. To open an existing file, visit "File" and "Open," then navigate to the file you want to open.
-
Step 2
Click on the page where the image should be placed. If an image will be placed inside a table, use the arrow tool to select the area of the text box where the image will be placed. Place the image by selecting "Insert" and "Image" from the tool bar on the top of the page. If the image is already on the page, simply click on the image.
-
Step 3
Notice the toolbar that appears when the image is selected. Inside this toolbar there are three outline tools that allow you to draw an outline for a link around a certain area on a page. If the area that will be made into a link is a square or rectangle, choose the square tool. If the area that will have a link placed is round, choose the circle. If the area is going to be the outline of a person or product, choose the polygon hotspot tool.
-
Step 4
If you chose the square or circle tool, go to the first area in the image where you want a link to be activated and click and drag over this area to create an outline of the area to be linked. If the area to be linked is an outline of a person or an object, use the polygon hotspot tool to trace around the part of the image that will become the first link on the page. Click every few inches or so as you trace around the image. The trace must be closed at the point at which it was started.
-
Step 5
Go to the "Link" box on the toolbar. It is to the right of the hotspot tools that were just used. Delete the # symbol in the box and type the URL address of the first link you want to create. In the box below, type in a couple of words that describe the link.
-
Step 6
Test the link by going to the toolbar on the top of the page and clicking on the small icon that looks like a globe. This opens the page in a Web browser and allows you to see if the link is properly working. To test the link, simply click on the area of the image where the link was created. If it sends you to the URL address you just typed, you successfully created a link.
-
Step 7
Repeat steps 3 to 6 as many times as necessary to create all of the links that need to be created within a single image. Remember to test the page after creating each link.
-
Step 8
Click on the "Code" pane on the window and you will see the html code the page has created. Select and copy all of the code from the opening "<img src" tag until the closing </map> tag. Paste this code into your web page to complete the process of placing multiple links in an image.
