【指教】javascript实现点击图片互斥解决方法
日期：2014-05-16 浏览次数：20448 次
【指教】javascript实现点击图片互斥
目前我需要做5个图片，当然。这个五个图片默认是a.gif
当点击其中一个时，图片换为b.gif,再点击此图片时换为a.gif;
其实就是这几个图片是互斥的关系。我做了一个。不过。不好用。
希望那位大侠帮忙一下
<!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>
</head>
<body>
<script>
function changeImg(obj,n)
{
for(i=0;i <document.all.img.length;i++)
{
if(obj.checked)
{
document.all.img[i].src= "a.gif ";
document.getElementsByName( "img ")[n-1].src= "b.gif ";
}
else
{
}
}
}
</script>
<table width= "200 " border= "1 ">
<tr>
<td onClick= "changeImg(this,1); "> <img src= "a.gif " name= "img " value= "img " id=1/> </td>
<td onClick= "changeImg(this,2); "> <img src= "a.gif " name= "img " value= "img " id=2/> </td>
<td onClick= "changeImg(this,3); "> <img src= "a.gif " name= "img " value= "img " id=3/> </td>
<td onClick= "changeImg(this,4); "> <img src= "a.gif " name= "img " value= "img " id=4/> </td>
<td onClick= "changeImg(this,5); "> <img src= "a.gif " name= "img " value= "img " id=5/> </td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
如果是多行~~
<html>
<script>
var pic1= "a.gif ";
var pic2= "b.gif ";
function changeImg(obj){
var tr=obj.parentNode;
if(tr.focusImg)tr.focusImg.src=pic1;
var img=obj.getElementsByTagName( "img ")[0];
img.src=pic2;
tr.focusImg=img;
}
</script>
<body>
<table width= "200 " border= "1 ">
<tr>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
</tr>
<tr>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= &qu
目前我需要做5个图片，当然。这个五个图片默认是a.gif
当点击其中一个时，图片换为b.gif,再点击此图片时换为a.gif;
其实就是这几个图片是互斥的关系。我做了一个。不过。不好用。
希望那位大侠帮忙一下
<!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>
</head>
<body>
<script>
function changeImg(obj,n)
{
for(i=0;i <document.all.img.length;i++)
{
if(obj.checked)
{
document.all.img[i].src= "a.gif ";
document.getElementsByName( "img ")[n-1].src= "b.gif ";
}
else
{
}
}
}
</script>
<table width= "200 " border= "1 ">
<tr>
<td onClick= "changeImg(this,1); "> <img src= "a.gif " name= "img " value= "img " id=1/> </td>
<td onClick= "changeImg(this,2); "> <img src= "a.gif " name= "img " value= "img " id=2/> </td>
<td onClick= "changeImg(this,3); "> <img src= "a.gif " name= "img " value= "img " id=3/> </td>
<td onClick= "changeImg(this,4); "> <img src= "a.gif " name= "img " value= "img " id=4/> </td>
<td onClick= "changeImg(this,5); "> <img src= "a.gif " name= "img " value= "img " id=5/> </td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
如果是多行~~
<html>
<script>
var pic1= "a.gif ";
var pic2= "b.gif ";
function changeImg(obj){
var tr=obj.parentNode;
if(tr.focusImg)tr.focusImg.src=pic1;
var img=obj.getElementsByTagName( "img ")[0];
img.src=pic2;
tr.focusImg=img;
}
</script>
<body>
<table width= "200 " border= "1 ">
<tr>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
</tr>
<tr>
<td onClick= "changeImg(this) "> <img src= "a.gif " /> </td>
<td onClick= "changeImg(this) "> <img src= &qu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
