I'm not sure if this is possible or not.

Is there a way to put a hyperlink on a specific coordinate on a image?

Ex

_____________________________________
|                                   |
|   xxx                             |
|   xxx                             |
|                                   |
|                                   |
|                                   |
|                    zzz            |
|                    zzz            |
|                                   |
|___________________________________|

Is there a way to set hyperlink on xxx position and a separate hyperlink on the zzz position of the image. How would I go about starting this?

I'm not sure if this is possible or not.

Is there a way to put a hyperlink on a specific coordinate on a image?

Ex

_____________________________________
|                                   |
|   xxx                             |
|   xxx                             |
|                                   |
|                                   |
|                                   |
|                    zzz            |
|                    zzz            |
|                                   |
|___________________________________|

Is there a way to set hyperlink on xxx position and a separate hyperlink on the zzz position of the image. How would I go about starting this?

• javascript
• html

• jsfiddle/lollero/rLwG2 - This is a lazy ass way of doing it. I generate 3 elements more or less automatically with jquery, but those could be put around the image(s) manually as well. – Joonas Commented Oct 16, 2012 at 6:45

4 Answers 4

<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>

more info about HTML coords Attribute http://www.w3schools./tags/att_area_coords.asp

Yes, it can be done with <map>

<map name="a">
  <area shape="rect" coords="25,25,75,75" href='url'>
</map>
<img usemap="#a" src=image.png>

There are many ways to approach this problem. Others have already mentioned using MAP, but it sounds like you might mean you want to position text links over the image rather than just create clickable zones. Assuming you want to position the links at pixel level, one way to do that looks like this:

<div id="myimagediv">
    <a id="linkxxx" href="xxx.example.">xxx</a>
    <a id="linkzzz" href="zzz.example.">zzz</a>
</div>

#myimagediv {
width: 150px;
    height: 100px;
    position: relative;
    background-image: url('myimage.jpg');
}
#myimagediv a {
    position: absolute;
}
#linkxxx {
    top: 10px;
    left: 10px;
}
#linkzzz {
    top: 70px;
    left: 70px;
}

That can be done by a process called 'image mapping.' It can be quite tedious because you'll have to map it pixel by pixel. There are tools on the internet which map images for you.