Image mapping is a method of hyperlinking areas of an image to destination web pages. There are a number of methods to create an image map. There are server-side and a client-side methods. Many people don't have access to the server side methods, so quite a number of (browser) client-side methods are more widely used. However, even those methods involve some additional knowledge of java, javascript, XHTML, CSS, or incantations from the Hogwarts wizard academy.
Here is my own low-tech hack method of image mapping that I developed while working undercover as a marine biologist teaching fish anatomy to grammar school children in the Cayman Islands. *
The low-tech HTML table method of simple image mapping means that you must decide upon an entirely horizontal and vertical grid for your image. HTML tables only support rows and columns, not irregular polygons and circles. So, we have to make decisions how to chop up our image.
As you can see from the pink lines and numbers, I chose to create a 3-column and 4-row HTML table. Now that we have sushi-cut our fishy to highlight its anatomical parts to become HTML links, we can continue our work using one of two different methods. I'm going to focus on the black angel fish's fins for the sake of explanation.
The first method requires that you edit the original image and cut it up to fit into your HTML table. Using your image editor software, you need to create 12 seperate images, like squared puzzle pieces. For the sake of brevity, here is the first row of images 1, 2 and 3. I added cellpadding space so you could see that there are 3 images below.
Using this first method and the same images as above, you then wrap each image in an HTML hyperlink destination of your choice. It will look something like this, linking the 3rd image to the wiki definition of a dorsal fin:
So ... only 9 more image edits to fit into our table puzzle and then we still have to link them all. I have a much faster and easier method of doing this.
Using the same concept, let's make our 12 image links by virtually cutting up the original image. However, instead of using image editor software to make our puzzle pieces, let's use our original image in full as the background image of the 3-column and 4-row table. Then, we can simply use our magical transparent image as the wrapped image link, sized for each of the 12 table cells.
I think my second method has several time-saving benefits. You don't actually have to carefully cut up the image. It's all imaginary cutting and sizing with a transparent GIF image wrapped in the hyperlink for the destination page. You only have to host the original background image and the one transparent GIF image, rather than all the individual piece images.
Hey Kids! Click on the fish's fins to learn more!
Go ahead. Click. I said, CLICK. Okay. Click on a fin now or no snack time for you.
If you want the HTML code for the above table in order to understand it better, simply use your web browser's View > Source option.
Bookmark This!
Email This!
Digg it!
