PartTwoDesign Posted October 23, 2020 Share Posted October 23, 2020 (edited) Site URL: https://overlandervehicles.co.uk/image-map-test Hello 🙂 I'm hoping someone can help me... I've working on an image map for a client using Image Map Pro and I want to add it to the site to test that it works ok so far. I've followed @simon 's instructions outlined in this thread:  I've inserted this code block: <div id="image-map-pro-container"></div> on this page: https://overlandervehicles.co.uk/image-map-test However, the image map is not appearing correctly and there's also a large amount of space appearing above it. (I've attached a jpeg to illustrate how it should look).  Below is what I have pasted into the site's Code Injection - perhaps there is an error that I can't locate: HEADER <link rel="stylesheet" href="css/image-map-promin.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.js"></script> <script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.css"></script> <script src="https://asparagus-sawfish-h9k3.squarespace.com/s/fontawesome-webfont.svg"></script> <script src="https://asparagus-sawfish-h9k3.squarespace.com/s/font-awesomemin.css"></script>  FOOTER <script src="js/jquery.min.js"></script> <script src="https://asparagus-sawfish-h9k3.squarespace.com/s/image-map-promin.js"></script>  <script type="text/javascript">     ;(function ($, window, document, undefined) {       $(document).ready(function() { $('#image-map-pro-container').imageMapPro({"id":5719,"editor": {"previewMode":1,"selected_shape":"oval-7185","tool":"select","shapeCounter":{"spots":2,"ovals":1}},"general":{"name":"Overlander R160","width":2500,"height":1500,"naturalWidth":2500,"naturalHeight":1500},"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92b71f1603802ed412b449/1603450658754/R160_keyline.jpg"},"shapes":{"pageload_animation":"grow","glowing_shapes":1,"glowing_shapes_color":"#ee7202","glow_opacity":0.35555555555555557,"stop_glowing_on_mouseover":0},"tooltips":{"tooltip_animation":"grow"},"layers":{"layers_list":[{"id":0,"title":"Main Floor","image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92b71f1603802ed412b449/1603450658754/R160_keyline.jpg","image_width":2500,"image_height":1500}]},"spots":[{"id":"oval-9983","title":"Circle","type":"oval","x":11.331,"y":40.755,"width":2.134,"height":3.557,"x_image_background":11.331,"y_image_background":40.755,"width_image_background":2.134,"height_image_background":3.557,"default_style":{"background_type":"image","background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","background_color":"#ee7202","background_opacity":1,"border_style":"none"},"mouseover_style":{"background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bce7eabde0201d2385bd/1603452135391/Minus_icon.png"},"tooltip_style":{"border_radius":2,"padding":8,"background_opacity":0.9924479166666667,"width":196,"auto_width":0,"offset_x":0.050422091782284184,"offset_y":-0.5390761294912796},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-241201","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oversized Rear Door with Retainer Catch"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92c015dfec2546ae952a1a/1603452949430/R160_Rear.jpg"}}}]}}]}}},{"id":"oval-7185","title":"Circle Test","type":"oval","x":32.77,"y":34.817,"width":2.134,"height":3.557,"x_image_background":32.77,"y_image_background":34.817,"width_image_background":2.134,"height_image_background":3.557,"default_style":{"background_type":"image","background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","background_image_opacity":0.6176470588235294,"background_color":"#ee7202","background_opacity":1,"border_style":"none"},"mouseover_style":{"background_image_url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92bc712226271c5b6a74f8/1603452017223/Plus_icon.png","border_style":"none"},"tooltip_style":{"border_radius":2,"padding":8,"background_opacity":0.9924479166666667,"width":196,"auto_width":0,"offset_x":0.050422091782284184,"offset_y":-0.5390761294912796},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-241201","settings":{"elements":[{"settings":{"name":"Heading","iconClass":"fa fa-header"},"options":{"heading":{"text":"Oversized Rear Door with Retainer Catch"}}},{"settings":{"name":"Image","iconClass":"fa fa-camera"},"options":{"image":{"url":"https://static1.squarespace.com/static/5dfb5f05e372e84d2cfff6b2/t/5f92c015dfec2546ae952a1a/1603452949430/R160_Rear.jpg"}}}]}}]}}}]});        });     })(jQuery, window, document);   </script>  Any help very much appreciated! Many thanks, Anna  Edited October 24, 2020 by PartTwoDesign Link to comment
Solution PartTwoDesign Posted October 24, 2020 Author Solution Share Posted October 24, 2020 Solved after carefully checking my code 😀 I had script tags instead of CSS links in my header (and the javascript path was incorrect). Delighted I figured it out!   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