Sillian Posted February 1, 2021 Share Posted February 1, 2021 Site URL: http://ixofficial.com I had to embed a javascript image map because for some reason you cant do responsive image maps with mouseover image changes on squarespace. The embedded image not only doesn't adapt to mobil format but it creates all these extra white blocks. it looks fine on desktops. how can i disable the mobil view for just this page. Link to comment
tuanphan Posted February 3, 2021 Share Posted February 3, 2021 Hi. Which JS code did you use? We can take a look 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!) Link to comment
Sillian Posted February 4, 2021 Author Share Posted February 4, 2021 On 2/3/2021 at 4:21 AM, tuanphan said: Hi. Which JS code did you use? We can take a look This is the full code of the embed. I know its clunky but its so far the only way i could get image maps to work in squarespace where the image changes depending on what region the mouse hovers on. You'd be my hero if you could sort me out! <html> <head> <meta charset="UTF-8"> </head> <body bgcolor="#000000"> <script LANGUAGE="javascript"> Image1 = new Image Image1.src = "https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816cacae10f67b148bb29/1612191434907/ix+menue+main.jpg" Image2 = new Image Image2.src = "https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816d07eeeac7efafa213b/1612191440756/ixmenu+music.jpg" Image3 = new Image Image3.src = "https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816d3745d07334aa59d62/1612191444142/ixmenu+live.jpg" Image4 = new Image Image4.src = "https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816dae46b4220f09b60a5/1612191451051/ixmenu+store.jpg" Image5 = new Image Image5.src = "https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816e1463c5f2ff3400cde/1612191457908/ixmenu+about.jpg" </script> <center> <img NAME="emp" SRC="https://static1.squarespace.com/static/600f17fad675964c7d22c089/t/601816cacae10f67b148bb29/1612191434907/ix+menue+main.jpg" class="centerimage" USEMAP="#ep"> </center> <script LANGUAGE="javascript"> function music() { document.emp.src = Image2.src; return true; } function live() { document.emp.src = Image3.src; return true; } function store() { document.emp.src = Image4.src; return true; } function about() { document.emp.src = Image5.src; return true; } function zoomout() { document.emp.src = Image1.src; return true; } </script> <map name="ep"> <area target="_self" alt="" title="" href="https://reed-kale-zkm4.squarespace.com/music" coords="270,232,72,181" shape="rect" onMouseOver="music()" onMouseOut="zoomout()"> <area target="_self" alt="" title="" href="https://reed-kale-zkm4.squarespace.com/live" coords="92,612,206,669" shape="0" onMouseOver="live()" onMouseOut="zoomout()"> <area target="_blank" alt="" title="" href="https://ixshop.bigcartel.com/" coords="684,270,897,342" shape="0" onMouseOver="store()" onMouseOut="zoomout()"> <area target="_self" alt="" title="" href="https://reed-kale-zkm4.squarespace.com/about" coords="657,536,809,587" shape="0" onMouseOver="about()" onMouseOut="zoomout()"> </map> </body> </html> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.