<div id="zoom_image">
<ul>
<li class="disable_01"><img src="img/img-zoom_01.png" alt=""></li>
<li class="disable_02"><img src="img/img-zoom_02.png" alt=""></li>
<li class="disable_03"><img src="img/img-zoom_03.png" alt=""></li>
<li class="disable_04"><img src="img/img-zoom_04.png" alt=""></li>
</ul>
</div>

<script>
$(document).ready(function() {
    $('img[usemap]').rwdImageMaps();
})

$(document).ready(function() {
    $("#zoom_image li").hide();
    $(".disable_01").fadeIn();

$(".clickable_01").click(function(){
    $("#zoom_image li:not(.disable_01)").fadeOut(600).removeClass("on");
    $(".disable_01").fadeIn(600).addClass("on");
});

$(".clickable_02").click(function(){
    $("#zoom_image li:not(.disable_02)").fadeOut(600).removeClass("on");
    $(".disable_02").fadeIn(600).addClass("on");
});

$(".clickable_03").click(function(){
    $("#zoom_image li:not(.disable_03)").fadeOut(600).removeClass("on");
    $(".disable_03").fadeIn(600).addClass("on");
});

$(".clickable_04").click(function(){
    $("#zoom_image li:not(.disable_04)").fadeOut(600).removeClass("on");
    $(".disable_04").fadeIn(600).addClass("on");
});

});
</script>