首页 新闻 会员 周边

前端开发的问题

-4
悬赏园豆:60 [待解决问题]

我已将一张图片上的若干区域设为热点,现在需要实现鼠标单击热点区域后使这个区域不再是热点区域。 

新人求助,最好有详细代码和解释,谢谢!

hhh2014的主页 hhh2014 | 初学一级 | 园豆:80
提问于:2015-05-25 10:54
< >
分享
所有回答(11)
-3
<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>
女孩,加油 | 园豆:1098 (小虾三级) | 2015-05-25 11:13

这个好像是百度知道上的答案吧,我试过了不能用

支持(0) 反对(0) hhh2014 | 园豆:80 (初学一级) | 2015-05-25 11:20

@hhh2014: 不能用。。

支持(0) 反对(0) 女孩,加油 | 园豆:1098 (小虾三级) | 2015-05-25 11:31

程序员

支持(0) 反对(0) Nopen | 园豆:165 (初学一级) | 2015-06-21 12:16
-4

如果没有跳转,点击后去掉href属性,或者去掉area也应该是可以的,

如果有跳转,应该服务器端去做了吧

Uteki | 园豆:573 (小虾三级) | 2015-05-29 15:27
-1

这个我只想告诉你一个思路,就是使用ajax刷新,你点击一下,触发了事件,然后ajax刷新页面,把你的图片放入一个div,然后把热点取消就成了。 

zeroonec | 园豆:59 (初学一级) | 2015-06-04 19:25
-1

绑定one()事件,点击一次

*逍遥游* | 园豆:234 (菜鸟二级) | 2015-09-07 18:07
-1

热点 换成a 定位上去 点击的时候用one()

匠人 | 园豆:280 (菜鸟二级) | 2015-12-15 13:56
0

增加一层div呢

CCapp | 园豆:202 (菜鸟二级) | 2015-12-17 21:19
0
 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了

女子100 | 园豆:85 (初学一级) | 2016-01-05 08:55
 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不可用,,但是鼠标放上面还是有手形,

 

这次回复的方法是删除你添加的热点,干干净净

支持(0) 反对(0) 女子100 | 园豆:85 (初学一级) | 2016-01-05 09:17
0

可以考虑增减class选择符

酸番茄 | 园豆:87 (初学一级) | 2016-01-10 18:51
0

这是PHP吧 不懂

走上人生巅峰 | 园豆:204 (菜鸟二级) | 2016-05-19 14:53
0

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);
    }
};

 

QxQstar | 园豆:212 (菜鸟二级) | 2016-12-02 20:27
1

点击之后设置display:none

一切都要简单化 | 园豆:210 (菜鸟二级) | 2017-04-19 10:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册