Image maps or "hotspots" allow you to select and outline segments of an image from which to create a hyperlink.
You might have a map of your state with the different counties outlined, from which you would create image maps providing more information about that county, for instance.
In this example, the image displays some multimedia principles. The multimedia circle in the image is mapped to a video created in QuickTime Pro. Let's take a look at it and how we did it.
The image you see above was created by using the graphics feature in PowerPoint, saved it as a jpg image, placed it in my local web folder, and simply dragged it onto this page. You can also use Fireworks (the image editing software included in Adobe CS4) to create a much better image!
Creating a hotspot or image map:
I then created a "hotspot," a place where I outline the location of a hyperlink. To do this, select the entire image on your webpage in Dreamweaver and you will see in the properties panel a place where you can select an image map shape.
Since my shapes are circles, I selected the circle icon. I then clicked in the Multimedia circle on my picture and drew the circle. You will need to include Alt text, so put in text that describes this image map or hotspot.
I then selected the html page I created with an embedded QuickTime movie to link to. That's it! When the user clicks the Multimedia circle, the html page appears with the movie embedded on it.
Creating individual movies in QuickTime Pro
I created an image file using Fireworks and opened that in QuickTime Pro. I created a new audio recording in QuickTime Pro and saved that, saving it as a QuickTime movie. I placed the movie file on my website.
To embed the movie, I simply dragged it on to a new page. Once you learn how to insert and link to one video, you'll understand how it works!