What is the html code when placing multiple links on a single image? For example… the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link?
To place multiple links on a single image you need an image map. You associate the image map with the image by giving the image map a name and referring to this name with you IMG tag’s USEMAP attribute. Within your map you will need one area element (tag) for each link.
Here is a simple example:
<img src="tree.jpg" alt="tree" usemap="leaves" width="100" height="150">
<map name="leaves">
<area coords="25,0,74,49" alt="Leaf 1" href="leaf-1.html" title="Leaf 1">
<area coords="0,50,49,99" alt="Leaf 2" href="leaf-2.html" title="Leaf 2">
<area coords="50,50,99,99" alt="Leaf 3" href="leaf-3.html" title="Leaf 3">
</map>
To aid the process of creating your map, there are lots of free image mapping sites. The one that I use is http://www.image-maps.com/
For more information, and an example, see http://www.html-tags-guide.com/html-map-tag.html