Jquery 使用图像映射,单击即可更改图像
我尝试多次使用一个图像贴图。这个想法是,你有一个图像地图的图片。你点击一个区域(在图像地图上有一个突出显示),你得到几个链接,你按下一个,图片就改变了。新图片使用与原始图片相同的图像贴图(只有图像中的颜色会发生变化) 我尝试过这里提供的解决方案: 但它不起作用,因为有图像地图。我的代码是:Jquery 使用图像映射,单击即可更改图像,jquery,image,function,imagemap,Jquery,Image,Function,Imagemap,我尝试多次使用一个图像贴图。这个想法是,你有一个图像地图的图片。你点击一个区域(在图像地图上有一个突出显示),你得到几个链接,你按下一个,图片就改变了。新图片使用与原始图片相同的图像贴图(只有图像中的颜色会发生变化) 我尝试过这里提供的解决方案: 但它不起作用,因为有图像地图。我的代码是: <script type="text/javascript" src="jquery.maphilight.js"></script> <script type="te
<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 />
$(函数(){
$('.map').maphilight();
});
$(文档).ready(函数(){
$('#区域1')。单击(函数(){
$(“#区域一”).show();
});
$('#区域2')。单击(函数(){
$(“#区域二”).show();
});
});
$(函数(){
$('#areaOne')。单击(函数(){
$(“#pic”).attr('src',“pic2.jpg”);
返回false;
});
});
单击图像地图,您将看到
这
还有这个
问题似乎出在usemap=#map上,因为当我去掉它时,图片变化很好,但没有突出显示。怎么了?当maphilight运行时,它将
包装在
中,并隐藏
。然后,Is将图像作为背景添加到新包装
要使代码正常工作,请更改以下内容:
为此:
$('#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;
});