Jump to content

Image Hotspots not responsive to stay in same position


jaybo

Recommended Posts

I have a map image with clickable flag hotspots. The site is active and live at www.berkshirebeertrail.com

When I make the image larger the flag hotspots don't keep their position.

I have tried to ensure the container is set to position:relative and the markers to position:absolute and used % values for left and top in the css properties.

Any ideas what I'm missing?

Link to comment
Share on other sites

I tried the image map example in the above link. When I double the image size (by adding width="700" to the image tag) the image map circles remain at their original sizes and positions, so not scaling with image.

Using SVG, they did scale and reposition correctly. (Coloured borders added to circles to view)

image.png.2ae8de22656303b9cd14fcb6a0a156df.png

Example code...

<html>
<head>
   <title>Example</title> 
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type='text/javascript'>
       $(function() {
           
           $(".hotspot").click(function() {
               let page = $(this).data('href')
               window.open ("https://developer.mozilla.org/docs/Web/" + page)
           })
       })
   </script>

   <style type='text/css'>
       .hotspot {
           fill: #fff;
           fill-opacity: 0;
           stroke: #F0F;
       }
   </style>
</head>
<body>
<!-- Normal size image -->
<svg width='25%'  viewBox='0 0 350 150'>
    <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/>
    <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" />
    <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" />
</svg>
<br> 
<!-- Double size image -->
<svg width='50%' viewBox='0 0 350 150'>
    <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/>
    <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" />
    <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" />
</svg>
</body>
</html>

 

P.S. Another option you may want to consider for this application is the Google Maps API.

 

Link to comment
Share on other sites

On 7/29/2023 at 11:54 PM, requinix said:

If I change the max-width on the .trailMap, the markers reposition correctly for me. How are you trying to resize it?

And instead of positioning elements over the image like that, consider using an older technique instead: the image map.

Thank you - Its for different device sizes. So when it increases to a tablet or desktop screen the markers shift up and to the left of the original positions.

 

I am looking at using image map - thank you for that advice. I have locked in the map image size for now while I work on that.

Link to comment
Share on other sites

On 7/30/2023 at 8:27 AM, Barand said:

I tried the image map example in the above link. When I double the image size (by adding width="700" to the image tag) the image map circles remain at their original sizes and positions, so not scaling with image.

Using SVG, they did scale and reposition correctly. (Coloured borders added to circles to view)

image.png.2ae8de22656303b9cd14fcb6a0a156df.png

Example code...

<html>
<head>
   <title>Example</title> 
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type='text/javascript'>
       $(function() {
           
           $(".hotspot").click(function() {
               let page = $(this).data('href')
               window.open ("https://developer.mozilla.org/docs/Web/" + page)
           })
       })
   </script>

   <style type='text/css'>
       .hotspot {
           fill: #fff;
           fill-opacity: 0;
           stroke: #F0F;
       }
   </style>
</head>
<body>
<!-- Normal size image -->
<svg width='25%'  viewBox='0 0 350 150'>
    <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/>
    <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" />
    <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" />
</svg>
<br> 
<!-- Double size image -->
<svg width='50%' viewBox='0 0 350 150'>
    <image x='-30' y='0' href="parrots.jpg" width="360" height="150" preserveAspectRatio/>
    <circle cx='70.5' cy='75' r='50' class='hotspot' data-href="JavaScript" />
    <circle cx='233' cy='75' r='50' class='hotspot' data-href="CSS" />
</svg>
</body>
</html>

 

P.S. Another option you may want to consider for this application is the Google Maps API.

 

Thank you - I am well versed in google maps api but for this project I am using a database to connect data and provide breweries a login to update its information amongst other things. I will look at the svg version too.

Link to comment
Share on other sites

4 hours ago, jaybo said:

I am well versed in google maps api but for this project I am using a database to connect data and provide breweries a login to update its information amongst other things.

Not sure how "I am using a database" means you can't use Google Maps? You can even use a custom "map" image, if you like the cartoonish style - people have done so with things like this GoT site.

Link to comment
Share on other sites

On 8/5/2023 at 5:24 PM, requinix said:

Not sure how "I am using a database" means you can't use Google Maps? You can even use a custom "map" image, if you like the cartoonish style - people have done so with things like this GoT site.

Sorry yes the database comment is incorrect - to clarify I want this to be a zero cost custom solution (no API charges) and also the client has specific needs on the map design.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.