Question

I would like to hotspot to areas in an image displayed on an html page.
However this image changes width and height based on the display screen:

<img height="100%" width="100%" src="img.png"/>

How shall I hotspot it?
I was thinking of a function that maps the original coordinates to those of the resized image.

Answer 1

You could place the image and hotspots in a relatively positioned element and then position the hotspots absolutely using percentages:

CSS

.hotspotted {
    position: relative;
}

.hotspot {
    display: block;
    position: absolute;
}

#hotspot1 {
   height: 81%;
   left: 9%;
   top: 16%;
   width: 45%;
}

#hotspot2{
    height: 18%; 
    right: 11%;
    top: 20%;
    width: 11%;
}

HTML

<div class="hotspotted">
    <img height="100%" width="100%" src="img.png"/>
    <a href="#" id="hotspot1" class="hotspot"></a>
    <a href="#" id="hotspot2" class="hotspot"></a>
</div>

Update

If you are going to use a map then I suggest you calculate new co-ordinates rather than use percentages. This can be quite easily done using the following equation:

new_x = (orginal_x / original_image_width) * new_image_width
new_y = (orignal_y / original_image_height) * new_image_height