An image map with Dreamweaver

No Photoshop slicing was involved in making the map on the left. The picture is a single JPG graphic placed on the page with the "insert image" command in Dreamweaver.

While Photoshop slicing is one way to link parts of an image to different Web addresses, this map uses a simpler technique: Dreamweaver's image-mapping tools, which allow you to simply draw oval, rectangular or irregular-shape "hotspots" on the image. Dreamweaver records numerical coordinates corresponding to the shapes you draw, and allows you to add link destinations and alternative text identifying each hotspot.

For variety, this time I didn't put state names on the map -- which would still have to be done in Photoshop before saving the image. Instead, I decided to make this a name-the-state quiz. Hover your mouse over the middle of a state and you will see a "tooltip" text giving its name, or a hint about it. Click and you will go to a related site, as you did with the Photoshop-sliced version of the map.

Dreamweaver does not automate the process of inserting the "tooltips," for all browsers, but it is not difficult. Dreamweaver does give you a place on the properties-inspector to type in "alt" (alternative) text for each image-link, which will give you tooltips on Internet Explorer browsers. However, that is not the original purpose of the alt tag. Firefox, Safari and other browsers only show the "alt" text on browsers that do not display images, such as speaking browsers for the visually impaired. Those browsers use an image "title" tag to mark tooltips. Solution: If you want to make your tooltips work for all browsers, put them in both the "alt" and "title" areas.

On this map, each state name or hint is a "title" inserted in the HTML code for the page. In Dreamweaver, use the split or code view to see the HTML. The alt-text appears in the HTML code as alt="Statename" (or whatever text you typed in the "alt" field. To add a title, you must edit the HTML code -- search for the "alt=", and add your title phrase.

For example, Kentucky's line in the code says
<area shape="rect" coords="73,90,193,143" href="http://ky.gov" alt="Home of Jim Beam" title="Home of Jim Beam" />

Dreamweaver wrote almost all of that code for me. All I had to add was title="Home of Jim Beam"

I also added a title to the "img" tag itself, so if you hover the mouse over part of the image that does not have its own link, the tooltip says "pick another state." Try Virginia, South Carolina or Florida. Or try hovering the mouse over the ocean.