CODEWITHSUNDEEP
htmlcssresize
simpatico
simpatico

Reputation: 11107

How to hotspot a resizable image?

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.

Upvotes: 2

Views: 5174

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37675

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

Upvotes: 4

algiecas
algiecas

Reputation: 2128

You will need to convert coordinates (x,y) to percentage.

E.g. if your image is 200px width and 200px height, and your coordinates are x=50px,y=100px then after converting you get 

x = 50/200*100 = 25%
y = 100/200*100 = 50%

So now you know that your coordinates are always 25% from left of the screen and 50% from top, assuming that image takes whole screen. Is this what you were asking? :)

Upvotes: 0

Related Questions