Use the map and area tags of the html, as in the example below

Well summarizing you can create a shape for the link and pass the coordinates, each number is an x, y coordinate.

In the case I drew a square by passing 4 points, x: 155, and: 156, x: 155, and: 213, x: 216, and: 217, x: 227,

To add another link (dividing the image into several parts) just put another area with the coordinates.

img{
  border:1px solid red;
  }

<img src="http://cnet1.cbsistatic.com/hub/i/2011/03/16/c7675aa8-fdba-11e2-8c7c-d4ae52e62bcc/1264abab866fd3930a8b419d21d1cff1/Chrome-logo-2011-03-16.jpg"alt="" usemap="#Map" />>

<map name="Map" id="Map">
  <area alt="" title="" href="#" shape="poly" coords="155,156,155,213,216,217,227,156" />
</map>

There are some sites that automatically generate the "mapping" code like this: link

I believe you can do this using background-image and background-position , as follows:

<a href="link" class="img parte1"></a>
<a href="link" class="img parte2"></a>
<a href="link" class="img parte3"></a>

.img {
   display: block;
   background-image:url(/images/img.jpg);
   width:200px;  /* Tamanho das partes 200x200 */
   height:200px;
}

.parte1 {
  background-position: x y; // posicione x, y de acordo com sua necessidade 
}

.parte2 {
   background-position: x y; // posicione x, y de acordo com sua necessidade
}

.parte3 {
   background-position: x y; // posicione x, y de acordo com sua necessidade 
}

Here's an example of the above technique JSFiddle .