Image map onclick problems

Question

Hi guys i have a problem with that code:

$("#gotobikeblue").click(function(){
           
           $("#bikeblue").show();
           $("#motor").hide();
           $("#wheel").hide();

           
        return false;
    });
    
    $("#gotomotor").click(function(){
           
           $("#bikeblue").hide();
           $("#motor").show();
           $("#wheel").hide();
   
           
        return false;
    });
    
    $("#gotowheel").click(function(){
           
           $("#bikeblue").hide();
           $("#motor").hide();
           $("#wheel").show();
   
           
        return false;
    });

#bikeblue
{
display:none;
}

#wheel
{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://i62.tinypic.com/2l8jmzo.jpg" alt="" usemap="#motor" id="motor"/>
<map  id="motor" name="motor">
<area id="gotobikeblue" alt="" title="" href="" shape="rect" coords="1135,13,1261,123" style="outline:none;" target="_self"     />
<area id="gotowheel" alt="" title="" href="" shape="rect" coords="1110,874,1265,997" style="outline:none;" target="_self"     />
</map>


<img src="http://i62.tinypic.com/14kv6zo.jpg" alt="" usemap="#bikeblue" id="bikeblue"/> 
<map id="bikeblue" name="bikeblue">
<area id="gotomotor" alt="" title="" href="" shape="rect" coords="10,9,103,92" style="outline:none;" target="_self"     />
<area id="gotowheel" alt="" title="" href="" shape="rect" coords="899,666,1010,756" style="outline:none;" target="_self"     />
</map>


<img src="http://i58.tinypic.com/2qvw12x.jpg" alt="" usemap="#wheel" id="wheel"/> 
<map id="wheel" name="wheel">
<area id="gotomotor" alt="" title="" href="" shape="rect" coords="13,12,164,109" style="outline:none;" target="_self"     />
<area id="gotobikeblue" alt="" title="" href="" shape="rect" coords="35,130,127,210" style="outline:none;" target="_self"     />
</map>

Why the page is reloaded after 2-3 clicks?? I need the page does not reload and clicking on the thumbnails let me see the corresponding images. If, however, use this code with two images , I get no problem . The problem comes when the images are more than two .

Don't run the code here, it's don't work here.

Answer 1

It seems to be something to do with multiple elements with the same ID (invalid HTML).

If I change the duplicated IDs to classes, the page does not reload for me anymore:

$(".gotobikeblue").click(function(){
    $("#bikeblue").show();
    $("#motor").hide();
    $("#wheel").hide();

    return false;
});

$(".gotomotor").click(function(){
    $("#bikeblue").hide();
    $("#motor").show();
    $("#wheel").hide();

    return false;
});

$(".gotowheel").click(function(){
    $("#bikeblue").hide();
    $("#motor").hide();
    $("#wheel").show();

    return false;
});

And the HTML:

<img src="http://i62.tinypic.com/2l8jmzo.jpg" alt="" usemap="#motor" id="motor"/>
<map  id="motor" name="motor">
<area class="gotobikeblue" alt="" title="" href="" shape="rect" coords="1135,13,1261,123" style="outline:none;" target="_self"     />
<area class="gotowheel" alt="" title="" href="" shape="rect" coords="1110,874,1265,997" style="outline:none;" target="_self"     />
</map>


<img src="http://i62.tinypic.com/14kv6zo.jpg" alt="" usemap="#bikeblue" id="bikeblue"/> 
<map id="bikeblue" name="bikeblue">
<area class="gotomotor" alt="" title="" href="" shape="rect" coords="10,9,103,92" style="outline:none;" target="_self"     />
<area class="gotowheel" alt="" title="" href="" shape="rect" coords="899,666,1010,756" style="outline:none;" target="_self"     />
</map>


<img src="http://i58.tinypic.com/2qvw12x.jpg" alt="" usemap="#wheel" id="wheel"/> 
<map id="wheel" name="wheel">
<area class="gotomotor" alt="" title="" href="" shape="rect" coords="13,12,164,109" style="outline:none;" target="_self"     />
<area class="gotobikeblue" alt="" title="" href="" shape="rect" coords="35,130,127,210" style="outline:none;" target="_self"     />
</map>