#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 01:00 AM. Reason: removed self-promotion from end of comment and added [code] tags
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2014
    Location
    bnangalore
    Posts
    9
    Rep Power
    0
    we can create a multiple link in one image,when we do our images are divided into many parts;...
    <img src="planets.gif" width="145" height="126" alt="Planets"
    usemap="#planetmap">

    <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
    </map>

IMN logo majestic logo threadwatch logo seochat tools logo