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

Question

i want to disable my image map while media screen in mobile screen.

我尝试在我的 html 文件的 head 标签中包含 javascript，类似这样，但它显示错误 error :

<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: $ is not defined

需要帮助。

Answer 1

你可以check the demo here

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

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

Answer 2

您必须 link Jquery 您的 html 文档。

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

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

Answer 3

您可以使用 javascript 的指令，如 getElementById 等，而无需包含它的库，但要使用诸如 removeAttr、setAttribute 之类的方法，您必须包含 javascript 库。 $ 在 javascript 库中定义。这就是为什么它给你错误 $ is not define.

添加 javascript 库。

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

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

disabling image map in mobile media screen

html

javascript

css

jquery

imagemap