先把图片控制大小！！
点击后！大小auto!!
再次点击大小还原！！
<script type="text/javascript">$(document).ready(function(){
$("#ck").children('img').click(function(){
if( $("this").hasClass('current')){
$(this).next("ul").removeClass("current")
$("this").css('width',"auto")
$("this").css('height',"auto")
}else{
$(this).addClass("current")
$("this").css('width',"50px")
$("this").css('height',"50px")
}
})
没试过！！你先试下吧！！
使用纯CSS即可实现全部效果，代码也很简单。
原理：hover触发CSS临近选择器
所需工具：DW（用来给图片画热区），PS（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
源码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>图片热区hover效果</title>
<style>
.main-wrap {position: relative width: 884px height: 600px margin: 0 auto} /* 宽度与高度必须与背景大图一致 */
.bigImg {position: absolute display: none border: 1px solid #ccc}
.img1 {top: 199px left: 153px}
.img2 {top: 369px left: 552px}
.img3 {top: 411px left: 632px}
.hotspot:hover + .bigImg {display: block}
</style>
</head>
<body>
<div class="main-wrap">
<img src="bg.jpg" usemap="#Map">
<map name="Map">
<area class="hotspot" shape="rect" coords="152,117,232,190" href="#">
<img class="bigImg img1" src="cpu.png">
<area class="hotspot" shape="rect" coords="553,313,605,355" href="#">
<img class="bigImg img2" src="drive.png">
<area class="hotspot" shape="rect" coords="635,353,695,397" href="#">
<img class="bigImg img3" src="printer.png">
</map>
</div>
</body>
</html>
