Jump to content

Image map resize works on 'normal' website but not when Embedded in SquareSpace

Recommended Posts

Hello, I have a map as .jpg (attached) , a javascript (imageMapResizer.min.js) which can be found at: https://github.com/davidjbradshaw/image-map-resizer, and simple html code found below. This works fine on a normal site but as I embed the code in SquareSpace - the image map works on full size, but upon resizing to a small size requiring the call to the javascript, it does not work. Has anyone any idea of maybe the flow of events ie Windows resizing or loading and the SquareSpace own responsive resizing which might interfere and override the javascript? Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <body>
    <div>(1) Transport Developments of interest to and under discussion at the LRTC<br><br>    
      <img class="marginauto" SRC="LRTC_NSWmap.jpg"  WIDTH=799  HEIGHT=409 usemap="#project_map" />
        
    <map name="project_map">
        <area shape="circle" coords="410,50,15" href="/transport-options-for-largescale-mine-at-toongi" alt="Toongi mine" title="Toongi mine">
        <area shape="poly" coords="380,300,380,250,480,160,480,180,480,190" href="/blayneydemondrille-regional-railway" alt="Blayney-Demondrille regional railway" title="Blayney-Demondrille regional railway">
        <area shape="rect" coords="590,250,615,295" href="/maldon-dombarton-railway" alt="Maldon-Dombarton railway" title="Maldon-Dombarton railway">
    </map>

    <ul>
        <li><A HREF="/blayneydemondrille-regional-railway">Blayney-Demondrille regional railway</A></li>
        <li><A HREF="/maldon-dombarton-railway">Maldon-Dombarton railway</A></li>
        <li><A HREF="/transport-options-for-largescale-mine-at-toongi">Transport options for Toongi mine, Dubbo LGA</A></li>
    </ul>
</div>
    <style>
    .marginauto {
            margin: 0px auto 0px;
            display: block;
            max-width: 100%; height: auto;
    }

    </style>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="imageMapResizer.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {     $('map').imageMapResize(); });
    </script>

  </body>
</html>

LRTC_NSWmap.jpg

Link to comment
  • Replies 3
  • Created
  • Last Reply
On 12/14/2020 at 9:59 AM, itmatters2us said:

Hello, I have a map as .jpg (attached) , a javascript (imageMapResizer.min.js) which can be found at: https://github.com/davidjbradshaw/image-map-resizer, and simple html code found below. This works fine on a normal site but as I embed the code in SquareSpace - the image map works on full size, but upon resizing to a small size requiring the call to the javascript, it does not work. Has anyone any idea of maybe the flow of events ie Windows resizing or loading and the SquareSpace own responsive resizing which might interfere and override the javascript? Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <body>
    <div>(1) Transport Developments of interest to and under discussion at the LRTC<br><br>    
      <img class="marginauto" SRC="LRTC_NSWmap.jpg"  WIDTH=799  HEIGHT=409 usemap="#project_map" />
        
    <map name="project_map">
        <area shape="circle" coords="410,50,15" href="/transport-options-for-largescale-mine-at-toongi" alt="Toongi mine" title="Toongi mine">
        <area shape="poly" coords="380,300,380,250,480,160,480,180,480,190" href="/blayneydemondrille-regional-railway" alt="Blayney-Demondrille regional railway" title="Blayney-Demondrille regional railway">
        <area shape="rect" coords="590,250,615,295" href="/maldon-dombarton-railway" alt="Maldon-Dombarton railway" title="Maldon-Dombarton railway">
    </map>

    <ul>
        <li><A HREF="/blayneydemondrille-regional-railway">Blayney-Demondrille regional railway</A></li>
        <li><A HREF="/maldon-dombarton-railway">Maldon-Dombarton railway</A></li>
        <li><A HREF="/transport-options-for-largescale-mine-at-toongi">Transport options for Toongi mine, Dubbo LGA</A></li>
    </ul>
</div>
    <style>
    .marginauto {
            margin: 0px auto 0px;
            display: block;
            max-width: 100%; height: auto;
    }

    </style>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="imageMapResizer.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {     $('map').imageMapResize(); });
    </script>

  </body>
</html>

LRTC_NSWmap.jpg

You should share the site url so we can check the issue

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Please take a look a the following thread.

I think the svg solution would be much simpler than the area map and the javascript code.

As bangank36 mentions if you post the URL to the page where you are trying to achieve this effect we can perhaps help you more easily.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.