Inserting "Hotspots" Using Dreamweaver


Select a picture of your choice and insert it into the webpage you have already composed.

step 1

Locate the Dreamweaver icon on the bottom of your screen
(Or, you may access Dreamweaver through Applications)


Open the file in which you have placed the desired photo using Dreamweaver, despite the fact that you may have created the page in another program.  When you click on the photo, you should have a menu appear like the one on the bottom of the sample screen shot.  If you do not see the menu, go to Windows and click on Properties. 


As you can see circled in the image to the left, you will use the shape best suited for your purpose to highlight your targeted area on your image.  For example, the square was used to highlight the iMovie portion of the image, while the circle was used to highlight the face.  The highlighted target areas are called "hotspots".

link hotspot

After highlighting a target area, you will need to link your targeted hotspot to an actual file already created. You can link easily by using the menu at the bottom of the page as marked on the image. Clicking on the file icon is a quick and painless option to linking files.  You can also go up to insert and click on link to accomplish this same task.  Continue these steps until you have met your desired affect

Lacey Cunningham    &   Beth Fairbanks   
Summer Internship - 2007