#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0

    What is the html code when placing multiple links on a single image?


    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?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0
    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:
    Code:
    <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.
    Last edited by Kravvitz; March 26th, 2013 at 12:00 AM. Reason: removed self-promotion from end of comment and added [code] tags

IMN logo majestic logo threadwatch logo seochat tools logo