Disable Image Map on Mobile Media Screen
I want to disable my image map during the media screen on the cell phone screen.
I am trying to include javascript
in the main tag of my file html
, something like this, but it shows an 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>
and this is my image map:
<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>
and this is mine error
:
ReferenceError: $ undefined
need help with this.
source to share
you can use javascript directives like getElementById etc. without including the library, but using methods like removeAttr, setAttribute, you have to include the javascript library. $ is defined in the javascript library. why is it giving you the error $ is not defined.
add javascript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
source to share
You can check the demo here
if($(window).width() < 1200){
// document.getElementById("imgmap").removeAttr("usemap");
$("#imgmap").removeAttr('usemap');
} else {
//$("#imgmap").setAttribute('usemap','#Map');
}
but if you need a responsive imagemap I can suggest this plugin for you
source to share