单击更改图像，带有图像映射答案

【问题标题】：Change image on click, with image map单击更改图像，带有图像映射
【发布时间】：2012-12-05 23:25:44
【问题描述】：

我正在尝试多次使用一个图像映射。这个想法是你有一张带有图像映射的图片。您单击一个区域（图像地图上有一个突出显示），您会得到几个链接，您按下一个，图片就会改变。新图片使用与原始图片相同的图像映射（仅图像中的颜色发生变化）。

我已经尝试过这里提供的解决方案：Jquery change image on click

但它不起作用，因为有图像映射。我的代码是：

    <script type="text/javascript" src="jquery.maphilight.js"></script>

<script type="text/javascript">$(function() {
        $('.map').maphilight();
    });</script>
 <script type="text/javascript src="src="http://code.jquery.com/jquery-latest.js"></script>

 <script>
  $(document).ready(function () {
    $('#area1').click(function () {
        $("#areaOne").show();
    });
    $('#area2').click(function () {
        $("#areaTwo").show();
    });
});
$(function() {
 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   return false;
 });
});
   </script>


<img class="map" id="pic"  src="pic.jpg" width="800" height="533" border="0"  usemap="#map" />

<map name="map" >
<area  shape="poly" id="area1" coords="201,316,220,324,257,350,290,385,315,423,329,456,297,466,235,476,194,479,158,481,128,474,101,453,94,440,93,426,96,411,114,389,137,367,168,342" href="javascript:myFunction(1)" />
<area shape="poly" id="area2"coords="204,315,226,324,254,345,288,379,313,414,330,455,380,439,446,409,489,368,517,329,541,300,580,266,581,254,567,241,549,240,531,242,514,250,489,264,465,282,441,298,416,306,394,303,348,283,323,264,296,236,246,285" href="javascript:myFunction(2)"/>
</map>
<br />

<div id="pushnshow">
Click on Image Map and you will see<br />
<div id="areaOne" class="areaOne "style="display: none" >this </div>
<div id="areaTwo" style="display: none">and this</div>

<br />

问题似乎出在 usemap=#map 因为当我把它拿走时，图片改变得很好，但没有突出显示。怎么了？

【问题讨论】：

标签： jquery image function imagemap

【解决方案1】：

当 maphilight 运行时，它会将 <img /> 包裹在 <div class="map" /> 中并隐藏 <img />。然后将图像作为背景添加到新的包装<div class="map" />。

要让您的代码正常工作，请更改以下内容：

 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   return false;
 });

到这里：

 $('#areaOne').click(function(){
   $("#pic").attr('src',"pic2.jpg");
   $("#pic").parent().css('background-image',"url(pic2.jpg)");
   return false;
 });

很遗憾，没有测试用例，但我相信这对你有用。希望对您有所帮助！

【讨论】：