Question

我想在移动屏幕中的媒体屏幕时禁用我的图像地图。

我在javascript文件的head标记中尝试包含html，像这样的东西，但它显示错误错误：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    if($(window).width() < 1200){
         /*document.getElementById("imgmap").removeAttribute("usemap");*/
        document.getElementById("imgmap").setAttribute('usemap','disabled');
    }
    if($(window).width() > 1199){
        document.getElementById("imgmap").setAttribute('usemap','#Map');
    }
</script>

这是我的图片地图：

<img class="bdg-homeimg" id="imgmap" src="http://www.chiantisculpturepark.it/newdesign/img/pievasciata.jpg" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="90,100,140,120" title="massimoturato" href="massimoturato.htm" target="_blank" onclick="NewWindow(this.href,'name','612','530','no');return false" />
<area shape="rect" coords="160,125,200,140" title="peperoni" href="peperoni.htm" target="_blank" onclick="NewWindow(this.href,'name','615','490','no');return false" />
<area shape="rect" coords="260,125,290,135" title="edisusilo" href="edisusilo.htm" target="_blank" onclick="NewWindow(this.href,'name','615','490','no');return false" />
<area shape="rect" coords="165,150,205,160" title="sandrobessi" href="sandrobessi.htm" target="_blank" onclick="NewWindow(this.href,'name','617','495','no');return false" />
<area shape="rect" coords="120,175,165,190" title="fabiozacchei" href="fabiozacchei.htm" target="_blank" onclick="NewWindow(this.href,'name','612','530','no');return false" />
<area shape="rect" coords="195,170,240,180" title="pierogiadrossi" href="pierogiadrossi.htm" target="_blank" onclick="NewWindow(this.href,'name','617','495','no');return false" />
<area shape="rect" coords="180,180,210,190" title="eliacasini" href="eliacasini.htm" target="_blank" onclick="NewWindow(this.href,'name','612','530','no');return false" />
<area shape="rect" coords="170,200,230,220" title="antonellafarsetti" href="antonellafarsetti.htm" target="_blank" onclick="NewWindow(this.href,'name','612','530','no');return false" />
<area shape="rect" coords="180,255,230,265" title="yuzhaoyang" href="yuzhaoyang.htm" target="_blank" onclick="NewWindow(this.href,'name','617','535','no');return false" />
</map>

这是我的error：

ReferenceError：$未定义

需要帮助。

Answer 1

你可以使用像getElementById等javascript的指令而不包括它的库但是要使用像removeAttr，setAttribute这样的方法你必须包含javascript库。 $是在javascript库中定义的。这就是为什么它给你一个$的错误是没有定义的。

添加javascript库。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 2

你可以check the demo here

if($(window).width() < 1200){
    // document.getElementById("imgmap").removeAttr("usemap");
    $("#imgmap").removeAttr('usemap');
  } else {
    //$("#imgmap").setAttribute('usemap','#Map');
  }

但是如果您想要响应式图像地图，那么我可以建议您this plugin

Answer 3

您必须将Jquery链接到您的html文档。

将此行放在您的html文档中： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

在移动媒体屏幕中禁用图像映射

3 个答案: