На кнопке Изменение изображения при наведении внутри изображения

Question

У меня есть 2 изображения один неактивный другой активный мне нужно, когда кто-то зависать на неактивной части изображения, чтобы изменить эту часть к активным, вот картины:

Я сделал это с помощью mapster, но не ретранслировал любой другой способ сделать это?

Answer 1

Простой способ сделать это, может дать вам некоторое представление

HTML

<div class="layer"> 
    <img src="http://i.imgur.com/hrG46JH.png" alt="tablet" width="380" height="563" border="0" usemap="#Map"> 
    <map name="Map"> 
     <area shape="rect" coords="34,87,182,199" href="#" id="idOne"> 
     <area shape="rect" coords="200,83,352,207" href="#" id="idtwo"> 
     <area shape="rect" coords="33,228,182,348" href="#" id="idthree"> 
     <area shape="rect" coords="33,381,183,497" href="#" id="idfive"> 
     <area shape="rect" coords="201,380,352,498" href="#" id="idsix"> 
     <area shape="rect" coords="202,233,350,345" href="#" id="idfour"> 
    </map> 
    <div class="id-1"></div> 
    <div class="id-2"></div> 
    <div class="id-3"></div> 
    <div class="id-4"></div> 
    <div class="id-5"></div> 
    <div class="id-6"></div> 
</div> 

CSS

.layer { 
    position:relative; 
    width:380px; 
    height:563px; 
} 
.id-1, .id-2, .id-3, .id-4, .id-5, .id-6 { 
    background:url(http://i.imgur.com/nboEjPb.png); 
    overflow: hidden; 
    position: absolute; 
    display:none; 
} 
.id-1 { 
    width: 180px; 
    height: 205px; 
    left: 0px; 
    top: 0px; 
    background-position: 0px 564px; 
} 
.id-2 { 
    width: 180px; 
    height: 205px; 
    right: 0px; 
    top: 0px; 
    background-position: -200px 564px; 
} 
.id-3 { 
    width: 180px; 
    height: 129px; 
    left: 0px; 
    top: 224px; 
    background-position:0px 340px; 
} 
.id-4 { 
    width: 180px; 
    height: 129px; 
    right: 0px; 
    top: 224px; 
    background-position:-200px 340px; 
} 
.id-5 { 
    width: 180px; 
    height: 129px; 
    left: 0px; 
    top: 377px; 
    background-position:0px 187px; 
} 
.id-6 { 
    width: 180px; 
    height: 129px; 
    right: 0px; 
    top: 377px; 
    background-position:-200px 187px; 
} 

Javascript

$(document).ready(function() { 
    $("#idOne, .id-1").mouseover(function() { 
     $('.id-1').show(); 
    }); 
    $("#idOne, .id-1").mouseout(function() { 
     $('.id-1').hide() 
    }); 

    $("#idtwo, .id-2").mouseover(function() { 
     $('.id-2').show(); 
    }); 
    $("#idtwo, .id-2").mouseout(function() { 
     $('.id-2').hide() 
    }); 

    $("#idthree, .id-3").mouseover(function() { 
     $('.id-3').show(); 
    }); 
    $("#idthree, .id-3").mouseout(function() { 
     $('.id-3').hide() 
    }); 

    $("#idfour, .id-4").mouseover(function() { 
     $('.id-4').show(); 
    }); 
    $("#idfour, .id-4").mouseout(function() { 
     $('.id-4').hide() 
    }); 

    $("#idfive, .id-5").mouseover(function() { 
     $('.id-5').show(); 
    }); 
    $("#idfour, .id-5").mouseout(function() { 
     $('.id-5').hide() 
    }); 

    $("#idsix, .id-6").mouseover(function() { 
     $('.id-6').show(); 
    }); 
    $("#idfour, .id-6").mouseout(function() { 
     $('.id-6').hide() 
    }); 
}); 

Fiddle http://jsfiddle.net/snavaneeth78/t7cud3bw/3/