Search code examples
javascriptjqueryhtmlcssimagemap

disabling image map in mobile media screen

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

i have trying include javascript in head tag of my html file, something like this but it shows an error 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 my error:

ReferenceError: $ is not defined

need a help on this.

Solution

  • you can use the directives of javascript like getElementById etc without including the library of it but to use methods like removeAttr, setAttribute you have to include the javascript library. $ is define in the javascript library. that's why it gives you an error of $ is not define.

    add the javascript library.

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