Question

我有2个图像，一个非活动，另一个活动我需要当有人悬停在图片的非活动部分将该部分更改为活动时，这里是图片：

我是用mapter完成的，但没有任何其他方式来重复这个呢？

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()
    });
});

小提琴http://jsfiddle.net/snavaneeth78/t7cud3bw/3/

在图片中悬停更改图像按钮

1 个答案: