 Image Maps allow you to define sections of an image that become different clickable links. Essentially, you graph out(map) the X and Y coordinates of the image and define what regions link to what subpages. An image map can be client-side or server-side. Server-side means that the program to run the image map resides on the server. This requires a scripting language such as Perl to create. In this class, we will focus on client-side image maps. Client-side image maps are coded into the HTML document and therefore reside on the user's(clients') computer. They are quicker and simpler to create. You can use image-mapping software to create the image map or you can do it by hand-coding. Guess which we will do in this class?? Let's say for example that I had the lovely image of the 3 Stooges and I wanted each face to be a clickable link to a webpage on that particular Stooge. Image mapping is really quite easy and allows you to be creative. My main caution is don't be so creative you fool your user. Make it obvious that the image you are using is clickable.
The entire code for the 3 Stooges image map is shown in the table below, both the yellow and white text. Do not click on the yellow, underlined text. But, if you hold your mouse over the yellow text, you can read a description of what that section codes in the bottom of your browser window.
|
||||
|
It looks like a regular image, but when the user moves his/her mouse over the face is changes to a finger signifying a clickable link. One of the problems with image maps for the user is how do they know if it's an image map or just an image if they don't move their mouse. Some image maps are obviously clickable. The image to the right from Volkswagon's first homepage has clickable regions such as the little car or the phone(Image to right is not currently an image map.). However, where the link takes you is not as obvious. With some images(like the 3 Stooges below) you may need to tell your user this is a clickable image. 
Basic Tags