CODEWITHSUNDEEP
jqueryhtmlcss
user3506460
user3506460

Reputation: 1

Position Hotspots on Scaleable Image

I have an image with hotspots that works fine if I assign the image a definite width and height. If I make the image scaleable using width=100%, then while my hotspot 'left'/'width' positioning stays accurate, the 'top'/'height' position moves all over the place. I know I need to set my top/height position by basing it on a measure of the current screen width, I just don't have the knowledge/language of how to code that.

This is the coding that works when the image is at original size (width 1580, height 1050), and so if i could just code my top to be top= 93% * (1050 / 1580) * new_screen_width BUT!

How can i do this ?

Here is my Code : 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Photo</title>
<style media="screen" type="text/css">

.hotspotted {
    position: relative;
}

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

#hotspot1 {
    height: 8%;
    left: 87%;
    top: 85%;
    width: 13%;
}

#hotspot2 {
    height: 7%;
    left: 92%;
    top: 93%;
    width: 4%;
}

#hotspot3 {
    height: 7%;
    left: 96%;
    top: 93%;
    width: 4%;
}



</style>
</head>

<body>

<div class="hot spotted">
<img src="images/homepage D.jpg" width="100%"  /> 
<a href="DMD A.html" id="hotspot1" class="hotspot"></a> 
<a href="DMD C.html" id="hotspot2" class="hotspot"></a> 
<a href="index.html" id="hotspot3" class="hotspot"></a>
</div>

</body>
</html>

Upvotes: 0

Views: 974

Answers (1)

Savaii
Savaii

Reputation: 11

This answer should be what you're looking for: https://stackoverflow.com/a/11411956/1825150

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

Check out that answer, My Head Hurts gives a detailed example as well. Hope this helps.

Edit: As per comments from Vality and Ghost, here's the quote of what that linked answer provides (at the time of this edit):

Important Note: The content of the linked answer comes from the poster mentioned above.

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>

OP's 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: 1

Related Questions