css - Is possible create map html area in percentage?

Question

I need to create something like this:

http://www.mrporter.com/journal/journal_issue71/2#2

where every product in my big image is associated with a tooltip which appears on mouse hover. But I need this to work with fullscreen images.

The first solution I thought (as the example above) is the map html solution where each fill up exactly the boundaries of my products. The problem is that I can't indicate precise values for my because my image size depends on window screen.

The best solution would be the possibility to set percentage values for my area. Is this possible? Any other suggestions ?

Answer 1

Alternative solution using links:

CSS:

.image{
  position: relative;
}
.image a{
  display: block;      
  position: absolute;
}

HTML:

<div class="image">
  <img src="image.jpg" alt="image" />
  <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a>
</div>

Percentage dimensions can be detected in graphic editors