disabling image map in mobile media screen

Question

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.

score 1 · Accepted Answer · answered May 14 '15 at 05:21

1

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>

answered May 14 '15 at 05:21

vitally

377
6
17

i had added `` and now i have error : `TypeError: document.getElementById(...) is null` – Ariasa May 14 '15 at 05:33
use this : $('#imgmap') by replacing document.getElementById("imgmap") – vitally May 14 '15 at 05:34
what the function to set or add attribute in jquery ? because `setAttribute is not a funcion` that was error now, sorry for that – Ariasa May 14 '15 at 05:43
oke, all fixed now. i change setAttribute() with attr() , thx alot @vitally – Ariasa May 14 '15 at 05:47
@Ariasa yep ! the you don't need to use javascript setAttribute. jQuery do it for you by attr("attribute","value"). you'r welcome. – vitally May 14 '15 at 05:53

score 0 · Answer 2 · edited May 14 '15 at 05:15

0

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 want responsive Image map then i can suggest you this plugin

edited May 14 '15 at 05:15

sheshadri

1,207
9
21

answered May 14 '15 at 04:58

Sahib Singh

27
7

In your Code you have Error $ is not defined, $ is for jQuery – Sahib Singh May 14 '15 at 05:00

Nicolas Castellanos · Answer 3 · 2015-05-14T05:24:42.707

0

You have to link Jquery to your html document.

Put this line in your html document:-

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

edited May 14 '15 at 05:24

answered May 14 '15 at 05:10

Nicolas Castellanos

887
10
23

disabling image map in mobile media screen

3 Answers3