首先我们需要做2个图，一个是灰色 一个是点亮之后的图
把中间的图片扣出来，或者做一整个大图
素材准备好了就开始弄js代码
先是html代码
<img src="./img/yw.jpg" alt="" border="0" usemap="#Map" id="chage">
<map name="Map" id="Map">
<area shape="circle" coords="106,235,64" href="#" onmousemove="a(1)" onmouseout="b()" alt="1"/>
<area shape="circle" coords="365,233,63" href="#" onmousemove="a(2)" onmouseout="b()" alt="2"/>
<area shape="circle" coords="625,233,64" href="#" onmousemove="a(3)" onmouseout="b()"alt=""/>
<area shape="circle" coords="106,462,63" href="#" onmousemove="a(4)" onmouseout="b()"alt=""/>
<area shape="circle" coords="365,461,64" href="#" onmousemove="a(5)" onmouseout="b()"alt=""/>
<area shape="circle" coords="626,461,63" href="#" onmousemove="a(6)" onmouseout="b()"alt=""/>
<area shape="circle" coords="884,462,65" href="#" onmousemove="a(7)" onmouseout="b()"alt=""/>
<area shape="circle" coords="882,235,63" href="#" onmousemove="a(8)" onmouseout="b()"alt=""/>
<area shape="rect" coords="46,311,175,333" href="#" />
<area shape="rect" coords="308,313,422,335" href="#" />
<area shape="rect" coords="573,310,688,339" href="#" />
<area shape="rect" coords="840,311,931,338" href="#" />
<area shape="rect" coords="45,538,176,561" href="#" />
<area shape="rect" coords="315,539,416,562" href="#" />
<area shape="rect" coords="582,539,674,562" href="#" />
<area shape="rect" coords="818,536,949,561" href="#" />
</map>
然后就是鼠标经过效果
写法有点low 但是效果实现了 仅供参考 哈哈 然后就是鼠标经过效果
<script>
function a(i){
if(i==1){
$("#chage").attr('src','img/yw1.jpg');
}else if(i==2){
$("#chage").attr('src','img/yw2.jpg');
}else if(i==3){
$("#chage").attr('src','img/yw3.jpg');
}else if(i==4){
$("#chage").attr('src','img/yw5.jpg');
}else if(i==5){
$("#chage").attr('src','img/yw6.jpg');
}else if(i==6){
$("#chage").attr('src','img/yw7.jpg');
}else if(i==7){
$("#chage").attr('src','img/yw8.jpg');
}else if(i==8){
$("#chage").attr('src','img/yw4.jpg');
}
}
function b(){
$("#chage").attr('src','img/yw.jpg');
}
</script>
辽公网安备:42900402000182号