itmatters2us Posted December 14, 2020 Posted December 14, 2020 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>
tuanphan Posted December 16, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Beyondspace Posted December 16, 2020 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 (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
creedon Posted December 16, 2020 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. 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.