js怎么实现单击图片,在图片上画个'钩' 5
展开全部
js点击事件原图片替换‘钩’图片
<script type="text/javascript">
function click(){
document.getElementById('id').src='b.jpg';
}
</script>
<img src="a.jpg" id="img" onclick="click()"/>
a.jpg原图片b.jpg‘钩’图片
<script type="text/javascript">
function click(){
document.getElementById('id').src='b.jpg';
}
</script>
<img src="a.jpg" id="img" onclick="click()"/>
a.jpg原图片b.jpg‘钩’图片
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js的点击事件，把原来的图片替换成有‘钩’的图片
<script type="text/javascript">
function click(){
document.getElementById('id').src='b.jpg';
}
</script>
<img src="a.jpg" id="img" onclick="click()"/>
a.jpg是你原来的图片，b.jpg是有‘钩’的图片
<script type="text/javascript">
function click(){
document.getElementById('id').src='b.jpg';
}
</script>
<img src="a.jpg" id="img" onclick="click()"/>
a.jpg是你原来的图片，b.jpg是有‘钩’的图片
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如下代码，点击后在单元格的右下角会出现一个绿色小方框（相当于你说的‘钩’），再次点击消失，功能及呈现的位置你可以根据自己需要进行更改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function hideOrBlock(o){
if(document.getElementById("show"+o).style.display=="block")
{document.getElementById("show"+o).style.display="none";
}else
{document.getElementById("show"+o).style.display="block";}
}
</script>
<style type="text/css">
#tab1 td{ border:1px solid #FFFF00; border-collapse:collapse;}
td{ height:95px; width:330px;}
div{width:25px; height:15px; border:1px solid #00CC00; float:right; margin-top:75px; display:none;}
</style>
</head>
<body>
<table id="tab1" cellpadding="0" cellspacing="0" style=" height:300px; width:400px; float:left;">
<tr>
<td onclick="hideOrBlock(1)"><div id="show1" ></div></td>
<td onclick="hideOrBlock(2)"><div id="show2" ></div></td>
<td onclick="hideOrBlock(3)"><div id="show3" ></div></td>
</tr>
<tr>
<td onclick="hideOrBlock(4)"><div id="show4" ></div></td>
<td onclick="hideOrBlock(5)"><div id="show5" ></div></td>
<td onclick="hideOrBlock(6)"><div id="show6" ></div></td>
</tr>
<tr>
<td onclick="hideOrBlock(7)"><div id="show7" ></div></td>
<td onclick="hideOrBlock(8)"><div id="show8" ></div></td>
<td onclick="hideOrBlock(9)"><div id="show9" ></div></td>
</tr>
</table>
</body>
</html>
参考：http://zhidao.baidu.com/question/339680772.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function hideOrBlock(o){
if(document.getElementById("show"+o).style.display=="block")
{document.getElementById("show"+o).style.display="none";
}else
{document.getElementById("show"+o).style.display="block";}
}
</script>
<style type="text/css">
#tab1 td{ border:1px solid #FFFF00; border-collapse:collapse;}
td{ height:95px; width:330px;}
div{width:25px; height:15px; border:1px solid #00CC00; float:right; margin-top:75px; display:none;}
</style>
</head>
<body>
<table id="tab1" cellpadding="0" cellspacing="0" style=" height:300px; width:400px; float:left;">
<tr>
<td onclick="hideOrBlock(1)"><div id="show1" ></div></td>
<td onclick="hideOrBlock(2)"><div id="show2" ></div></td>
<td onclick="hideOrBlock(3)"><div id="show3" ></div></td>
</tr>
<tr>
<td onclick="hideOrBlock(4)"><div id="show4" ></div></td>
<td onclick="hideOrBlock(5)"><div id="show5" ></div></td>
<td onclick="hideOrBlock(6)"><div id="show6" ></div></td>
</tr>
<tr>
<td onclick="hideOrBlock(7)"><div id="show7" ></div></td>
<td onclick="hideOrBlock(8)"><div id="show8" ></div></td>
<td onclick="hideOrBlock(9)"><div id="show9" ></div></td>
</tr>
</table>
</body>
</html>
参考：http://zhidao.baidu.com/question/339680772.html
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
