准备素材，主要是几个菱形块图片以及鼠标移上去的效果图片（鼠标移上去，替换一张蓝色透明图片）
先上效果，鼠标移到菱形区域显示产品名称
思路
1. 首先将几个菱形图片绝对布局，使其在相应的位置
2. 对每个图片进行图片热点设置，热点区域为图片中菱形区域
3. 写脚本使得鼠标以上菱形区域后显示另外一张图片
以下是代码
<div class="awsome"> <img id="d1img" src="images/d1.png" class="d d0" usemap="#d1" style="top:40px;left:220px;"> <img src="images/d1s.png" class="d" usemap="#d1" style="top:40px;left:220px;display:none;z-index:99;"> <img id="d2img" src="images/d2.png" class="d d0" usemap="#d2" style="top:250px;left:220px;"> <img src="images/d2s.png" class="d" usemap="#d2" style="top:250px;left:220px;display:none;z-index:99;"> <img id="d3img" src="images/d3.png" class="d d0" usemap="#d3" style="top:145px;left:115px;"> <img src="images/d3s.png" class="d" usemap="#d3" style="top:145px;left:115px;display:none;z-index:99;"> <img id="d4img" src="images/d4.png" class="d d0" usemap="#d4" style="top:145px;left:325px;"> <img src="images/d4s.png" class="d" usemap="#d4" style="top:145px;left:325px;display:none;z-index:99;"> <img id="d5img" src="images/d5.png" class="d d0" usemap="#d5" style="top:250px;left:10px;"> <img src="images/d5s.png" class="d" usemap="#d5" style="top:250px;left:10px;display:none;z-index:99;"> <map name="d1" id="d1"> <area shape="polygon" coords="100,0,200,100,100,200,0,100" href="#" οnmοuseοver="javascript:showHref('#d1img')" οnmοuseοut="javascript:hideHref('#d1img')" target="_blank" alt=""/> </map> <map name="d2" id="d1"> <area shape="polygon" coords="100,0,200,100,100,200,0,100" href="#" οnmοuseοver="javascript:showHref('#d2img')" οnmοuseοut="javascript:hideHref('#d2img')" target="_blank" alt=""/> </map> <map name="d3" id="d1"> <area shape="polygon" coords="100,0,200,100,100,200,0,100" href="#" οnmοuseοver="javascript:showHref('#d3img')" οnmοuseοut="javascript:hideHref('#d3img')" target="_blank" alt=""/> </map> <map name="d4" id="d1"> <area shape="polygon" coords="100,0,200,100,100,200,0,100" href="#" οnmοuseοver="javascript:showHref('#d4img')" οnmοuseοut="javascript:hideHref('#d4img')" target="_blank" alt=""/> </map> <map name="d5" id="d1"> <area shape="polygon" coords="100,0,200,100,100,200,0,100" href="#" οnmοuseοver="javascript:showHref('#d5img')" οnmοuseοut="javascript:hideHref('#d5img')" target="_blank" alt=""/> </map> </div>JS脚本 function showHref($id){ $($id).next("img").show(); } function hideHref($id){ $($id).next("img").hide(); }