Jump to content

how to disable mobile view on home page

Recommended Posts

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
  • Replies 2
  • Views 381
  • Created
  • Last Reply
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

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.