itmatters2us Posted December 14, 2020 Share Posted December 14, 2020 (edited) 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> Edited December 14, 2020 by itmatters2us Beyondspace 1 Link to comment
tuanphan Posted December 16, 2020 Share Posted December 16, 2020 Hi, If you haven't received an answer yet, you can post on some FB groups + Squarespace Customization Resource Groups + Squarespace Community + Squarespace Entrepreneur + Squarespace Rockstars Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Beyondspace Posted December 16, 2020 Share Posted December 16, 2020 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> 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
creedon Posted December 16, 2020 Share Posted December 16, 2020 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. tuanphan and Beyondspace 2 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment