求JS代码,如何使用JS改变图片状态

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

具体样式如下图所示http://album.sina.com.cn/pic/46f84c5d02000p0i
mmcgzs不知道怎么搞的.我用你的方法,无法实现.具体样式如图http://album.sina.com.cn/pic/46f84c5d02000p0i 点后,图片会换.
对了  这些图片都在 image目录下,是不是因为目录问题导致无法实现?我引用的时候这样写的.
<a href="#"><img src="images/img01.gif"  width="72" height="27" border="0" onClick="changeImg(this)"></a>
ropue2000(ropue)麻烦细说一下好吗?   我找到插入标签了.没找到行为和交换图象
我按mmcgzs所说,编写的代码如下,诸位高手帮忙看看哪写错了.
<html>
<head>
<script language=javasript>
   var currentImgObj=null;
   function changeImg(obj)
   {
      if (obj.src.indexOf("_")!=-1)
          obj.src=obj.src.split("_")[0]+".gif";
            else
          obj.src=obj.src.split(".")[0]+"_on.gif";
      if (currentImgObj)
          currentImgObj.src=currentImgObj.src.split("_")[0]+".gif";
      currentImgObj=obj
   }
</script>
</head>
<body  topmargin="0" leftmargin="0">
<table width="100%" border="0" CELLPADDING=0 CELLSPACING=0 >
  <tr>
    <td width="95%" bgcolor="818181"><div align="right"><em><img src="images/blank.gif" width="1" height="37"><a href="#"><img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)"></a><a href="#"><img src="images/img02.gif"  width="65" height="27" border="0" onClick="changeImg(this)"></a><a href="#"><img src="images/img03.gif"  width="93" height="27" border="0" onClick="changeImg(this)"></a><a href="#"><img src="images/img04.gif"  width="92" height="27" border="0" onClick="changeImg(this)"></a></em></div></td>
    <td width="5%" bgcolor="818181"> </td>
  </tr>
</table>
</body>
</html>
晕死了<script language=javasript>
改成
<script language=javascript>
第一行改为<script language="javascript" type="text/javascript">就实现了.但是新问题出现了就是同一个地方,如果我点两次,就是一个X号了.
<script language=javascript>
   var currentImgObj=null;
   function changeImg(obj)
   {
     if (!currentImgObj || currentImgObj!=obj)
     {
      if (obj.src.indexOf("_")!=-1)
          obj.src=obj.src.split("_")[0]+".gif";
            else
          obj.src=obj.src.split(".")[0]+"_on.gif";      if(currentImgObj)
          currentImgObj.src=currentImgObj.src.split("_")[0]+".gif";
     }
      currentImgObj=obj;   }
</script>
还有,能不能,让img01  一开始就是 _on  状态的??
var currentImgObj=null;
改
var currentImgObj=document.getElementById("defaultImg");<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)">改<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)" id=defaultImg>
覆盖好了~~~   实现了..谢谢.
能不能让其中一个图片,一开始就是点击后的状态,就是
http://album.sina.com.cn/pic/46f84c5d02000p0i 这个图片显示的样子.
var currentImgObj=null;
改
var currentImgObj=document.getElementById("defaultImg");<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)">改<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)" id=defaultImg>
照着改了.不知道为什么,没实现.
var currentImgObj=null;
改
var currentImgObj=document.getElementById("defaultImg");<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)">改<img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)" id=defaultImg>
<html>
<head>
<script language=javascript>
   var currentImgObj=document.getElementById("defaultImg");
   function changeImg(obj)
   {
     if (!currentImgObj || currentImgObj!=obj)
     {
      if (obj.src.indexOf("_")!=-1)
          obj.src=obj.src.split("_")[0]+".gif";
            else
          obj.src=obj.src.split(".")[0]+"_on.gif";      if(currentImgObj)
          currentImgObj.src=currentImgObj.src.split("_")[0]+".gif";
     }
      currentImgObj=obj;   }
</script></head>
<body  topmargin="0" leftmargin="0">
<table width="100%" border="0" CELLPADDING=0 CELLSPACING=0 >
  <tr>
    <td width="95%" bgcolor="818181">
<div align="right"><img src="images/blank.gif" width="1" height="37"><a href="#"><img src="images/img01_on.gif"  width="72" height="27" border="0" onClick="changeImg(this)" id="defaultImg"></a><a href="#"><img src="images/img02.gif"  width="65" height="27" border="0" onClick="changeImg(this)"></a><a href="#"><img src="images/img03.gif"  width="93" height="27" border="0" onClick="changeImg(this)"></a><a href="#"><img src="images/img04.gif"  width="92" height="27" border="0" onClick="changeImg(this)"></a></div>
</td>
    <td width="5%" bgcolor="818181"> </td>
  </tr>
</table>
</body>
</html>
就是让 img01  在刚进去的时候是_on的如果点了img02  那img01就不是_on了.
现在的效果是,  进去的时候,img01是_on点img02的时候,img01和img02都是 _on
现在是这样的我传到这了
http://ishare.sina.com.cn/cgi-bin/fileid.cgi?fileid=1347073
<script language=javascript>
   var currentImgObj=document.getElementById("defaultImg");
   function changeImg(obj)
   {
     if (!currentImgObj) currentImgObj=document.getElementById("defaultImg");
     if (!currentImgObj || currentImgObj!=obj)
     {
      if (obj.src.indexOf("_")!=-1)
          obj.src=obj.src.split("_")[0]+".gif";
            else
          obj.src=obj.src.split(".")[0]+"_on.gif";      if(currentImgObj)
          currentImgObj.src=currentImgObj.src.split("_")[0]+".gif";
     }
      currentImgObj=obj;   }
</script>覆盖一下
管理员 ,怎么给分啊?说我的分总和不够.........我自己回自己的贴,不用给自己分吧.
我一共就200分,希望全给mmcgzs(毛毛虫：唯一一种长有绒毛的爬行动物！)
haha道理很简单啊
把功能划分成几个逻辑步骤
然后逐个实现
很简单呀. 就和checkbox效果一样对不?我的思路是利用这些图片的容器(父标记), 每张图片onclick时容器内的所有图片还原到1状态,然后被click的图片变为2当然你也可以不利用容器,而是给这些图片的ID编号, 每张图片onclick时利用FOR把编号的图片还原到状态1,然后被click的图片变为2方法很多的, LZ恶补DOM去吧