Search code examples
htmlimagearea

How to make part of an image an href?


I have made a website, and would like to make the subscribe button clickable (an href).

So far here is my code for that. My problem is that I don't know how to do the coordinates. Is there a website I can use?

<map name="subscribe"
<area shape="rect" coords="0,0,82,126" href="http://www.google.com" alt="Test">
</map>

Here is my image:

It's an image


Solution

  • Map Area coords are: left, top, width, height

    http://jsfiddle.net/5sXAb/

    <img width="600px" src="https://i.sstatic.net/AQ4BD.png" usemap="#subscribe">
    
    <map name="subscribe">
    <area shape="rect" coords="230,55,385,100" href="http://www.google.com" alt="Test">
    </map>
    

    Ninja edit; there are ways round it, for example using imaging software to find the coords, a javascript code the adds a border, or my preferred option - using transparent divs instead.