Lesson 3.1: Imagemaps
What Are Imagemaps?
If your website is more graphically oriented, then you may consider using imagemaps.
What are imagemaps exactly? The technical meaning of imagemaps: imagemaps tell the browser the coordinates of the clickable region of the picture so that it can turn it into a link.
In English: Imagesmaps turn regions of pictures into links. They are used for sites that have images with clickable regions. Dreamweaver makes imagemaps very easy to implement.
How to Make Imagemaps
In order to have an imagemap, you must have an image/graphic first that contains pictures and/or text that you want to have made into a clickable link. For instance, let's say we have this opening graphic on our sample homepage:
We want to make three clickable areas on this graphic, one for each of the three links.
To make the imagemap, first click on the graphic so that it's active. (When an image is active, it will have a black border around it with black squares at some corners.) Then, make sure your toolbar is expanded. (If it's not expanded, then just click on the little white down-arrow on the bottom right corner.) The Map toolbar is located on the bottom left-hand corner of the expanded toolbar.
To create an imagemap, first, type a name for your imagemap in the textbox by the word "Map". Then choose the shape you want your link on the graphic to be by clicking on either the square, circle, or polygon button. Draw the link you want directly on the graphic. If you make a mistake, click on the arrow button (located underneath the word "Map"), select the link you just drew, and press delete. After drawing the link, fill in the appropriate link information in the toolbar (in the textbox named "Src"). (If you don't know about links, click here.) If you want to make another link, then just continue drawing them. Click off of the image anywhere on the screen to deselect the image and stop working its imagemap.
To see what the finished imagemap in action, click here. (The example will open up in a new window.)
