<html><head> <title>pic</title><script src="jquery.js"></script></head><body><meta http-equiv="Content-Type" content="text/html" charset="utf-8"/><p align="center"><img src="1.jpg" usemap="#1" boarder=0 ></p><map name="1" id="1"> <area shape="rect" coords="124,120,170,176" href =" <area shape="rect" coords="179,133,224,189" href =" <area shape="rect" coords="247,113,272,147" href ="</map><script> $(".rect1").click(function(){this.href="javascript:void(0);";}); $(".rect2").click(function(){this.href="javascript:void(0);";}); $(".rect3").click(function(){this.href="javascript:void(0);";});</script></body></html>这个好像是百度知道上的答案吧,我试过了不能用
@hhh2014: 不能用。。
程序员
如果没有跳转,点击后去掉href属性,或者去掉area也应该是可以的,
如果有跳转,应该服务器端去做了吧
这个我只想告诉你一个思路,就是使用ajax刷新,你点击一下,触发了事件,然后ajax刷新页面,把你的图片放入一个div,然后把热点取消就成了。
绑定one()事件,点击一次
热点 换成a 定位上去 点击的时候用one()
增加一层div呢
1 <html> 2 <head> 3 <title>pic</title> 4 </head> 5 <body> 6 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 7 <p align="center"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/32fa828ba61ea8d37ae4684d950a304e241f58b0.jpg" usemap="#1" boarder=0 ></p> 8 <map name="1" id="1"> 9 <area shape="rect" coords="31,27,159,132" href ="" onClick="this.href='javascript:void(0)';"> 10 11 <area shape="rect" coords="204,28,331,131" href ="" onClick="this.href='javascript:void(0)';"> 12 13 <area shape="rect" coords="367,25,492,128" href ="" onClick="this.href='javascript:void(0)';"> 14 15 </map> 16 </body> 17 </html>
这是你要的菜吧,这么简单的动作就不要用JQ了
1 <html> 2 <head> 3 <title>pic</title> 4 </head> 5 <body> 6 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 7 <p align="center"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/32fa828ba61ea8d37ae4684d950a304e241f58b0.jpg" usemap="#1" boarder=0 ></p> 8 <map name="1" id="1"> 9 <area shape="rect" coords="31,27,159,132" href ="javascript:void(0)" onClick="this.parentNode.removeChild(this);"> 10 11 <area shape="rect" coords="204,28,331,131" href ="javascript:void(0)" onClick="this.parentNode.removeChild(this);"> 12 13 <area shape="rect" coords="367,25,492,128" href ="javascript:void(0)" onClick="this.parentNode.removeChild(this);"> 14 15 </map> 16 </body> 17 </html>
单击删除描点,,新测,,,结帖吧,大哥,,给分我,我也有问题问别的大神,,互相学习咯
上面第一次回复的方法是设置href不可用,,但是鼠标放上面还是有手形,
这次回复的方法是删除你添加的热点,干干净净
可以考虑增减class选择符
这是PHP吧 不懂
html文件
<div class="warp" id="linkGroup"> <img src="2327f9e95c1699a37caa8c7b17a7e179.png"> <a id='link1' class="link link-1" href="https://www.baidu.com/" target="_blank"></a> <a id='link2' class="link link-2" href="http://www.163.com/" target="_blank"></a> <a id='link3' class="link link-3" href="http://www.qq.com/" target="_blank"></a> </div>
css文件
*{ padding: 0; margin: 0; } .warp{ position: relative; display: inline-block; *display:inline; zoom: 1; } .link{ position: absolute; display: block; } .link-1{ top:0; left: 0; width: 40%; height: 50%; } .link-2{ bottom: 0; right: 0; width: 15%; height: 15%; } .link-3{ bottom: 0; left: 0; width: 10%; height: 15%; }
js代码
var linkGroup = document.getElementById('linkGroup'); linkGroup.onclick = function(event){ var event,target,parent; event = event || window.event; target = event.target || event.srcElement; if(target.tagName.toLowerCase() === 'a'){ parent = target.parentNode; parent.removeChild(target); } };
点击之后设置display:none