How to Add a Point to an Image Map Polygon in Dreamweaver

In a Web page, an image map is a graphic containing several links, or hotspots. Clicking the link on the image map takes the user to another page or URL. You can use Adobe Dreamweaver, a popular Web page design program, to create circular, rectangular and polygon-shaped hotspots with the program's hotspot drawing tools. To add a point to a polygon-shaped hotspot, use one of these tools on the spot in the image map where you want to add the new point.

Things You'll Need

  • Adobe Dreamweaver CS2 or later

Instructions

    • 1

      Open the Dreamweaver HTML page containing an image from which you want to create an image map, or create a new page by clicking the "File" menu and choosing "New" to open a New Document dialog box. Select "HTML" in the Page Type list, choose the desired layout from the "Layout" list, then click the "Create" button.

    • 2

      Click the "File" menu and choose "Save As." Name and save the file using the Save As dialog box.

    • 3

      Click in the page where you want to insert an image map.

    • 4

      Click the "Insert" menu and choose "Image" to open the Select Image Source dialog box. Navigate to the image file, select it and choose "OK." This opens the Image Tag Accessibility Attributes dialog box. Click in the "Alternate Text" field and type a name for the image, such as "Image Map." This is the description the user sees when hovering a cursor over the image.

    • 5

      Click "OK." Dreamweaver inserts the image into the Web page.

    • 6

      Click the "Polygon Hotspot Tool" -- the fourth tool -- in the Map section of the Properties panel, and click in the image where you want the first point of your polygon hotspot. Dreamweaver creates the first point -- a small blue box, or handle -- of the polygon, then prompts you to name the hotspot.

    • 7

      Click "OK." Click in the "Alt" field in the Properties panel and type a description for this hotspot. This is the message the user sees when hovering a cursor over the hotspot. Type a meaningful description, such as "Click here to see our Los Angeles office."

    • 8

      Click in the image where you want the second point of your polygon hotspot. Dreamweaver inserts the second point and draws a line connecting the two points.

    • 9

      Click in the image where you want the third point of your polygon hotspot. Dreamweaver inserts the third point and creates the polygon, filling in the area between the three points. Create additional points by clicking in the image where you want each new point. Dreamweaver adjusts the size and shape of the polygon based on where you insert each new point.

      To add a point to an existing, previously created polygon, click the "Pointer Hotspot Tool" -- the arrow icon -- in the Map section of the Properties panel, then click the polygon to select it. Select the "Polygon Hotspot Tool," then click in the image where you want to add the new point.

Tips & Warnings

  • Create as many hotspots on the image map as you want, using the Polygon Hotspot Tool, the Rectangle Hotspot Tool or the Circle Hotspot Tool.
  • Adjust the size and shape of your hotspots with the Pointer Hotspot Tool. Select the tool, then click and drag on the hotspot points and reposition them as desired.
  • When you upload the Web page containing the image map to a Web server, remember to upload the image you used to create the image map. Otherwise, your image map will not display and work properly.
Related Searches

References

Resources

  • Photo Credit Comstock/Comstock/Getty Images

Related Ads

Check It Out

Prep for Black Friday Checklist [Infographic]