头都搞晕了!!50分求一段javascript代码,

<td colspan="2">
                  图像：
                   <img src="Images/Face/face1.gif" alt="" border="0" id="img1" onclick="f('img1')" class="" />
                   <img src="Images/Face/face2.gif" alt="" border="0" id="img2" onclick="f('img2')" class="" />
                   <img src="Images/Face/face3.gif" alt="" border="0" id="img3" onclick="f('img3')" class=""  />
                   <img src="Images/Face/face4.gif" alt="" border="0" id="img4" onclick="f('img4')" class="" />
                   <img src="Images/Face/face5.gif" alt="" border="0" id="img5" onclick="f('img5')" class="" />
                   <img src="Images/Face/face7.gif" alt="" border="0" id="img7" onclick="f('img7')" class=""  />
               </td>JS代码:
    <script>
function f(imgid)
{
document.getElementById(imgid).className="imgStyle"
document.getElementById("face").value=document.getElementById(imgid).src
document.write(document.getElementById("face").value)}
</script>
问题一:document.getElementById(imgid).src
返回值为绝对路径:http://192.168.3.10/Images/Face/face1.gif
我只想要相对路径部分,即Images/Face/face1.gif,该如何取问题二:当然点击时img时,会设置它的class,但当我点击第二个img时,前面点击的img class属性还在!!
怎样让我点击其它img时,剩余img的class复原

解决方案 »

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

第一题看下面下面的示例演示了substr 方法的用法。function SubstrDemo(){
   var s, ss;                // 声明变量。
   var s = "The rain in Spain falls mainly in the plain.";
   ss = s.substr(12, 5);  // 获取子字符串。
   return(ss);               // 返回 "Spain"。
}
要第二题不刷新页面的话应该没问题的啊
问题二
你可以在点击是先把原来的className全置空，再把选中的设置className
可以这样
var arr = document.getElementsByTagName("img");
for(var i in arr)
{
  arr[i].).className="";
}
再把选中的设置其className
错了点
var arr = document.getElementsByTagName("img");
for(var i in arr)
{
  arr[i].className="";
}
随便写了一个你自己参考一下吧
<!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">
    var city=new Array();
city[0]=["张家口","承德","廊坊","沧州","保定","衡水","邯郸","邢台","石家庄"];
city[1]=["榆次","长治","大同"];
city[2]=["淄搏","曲阜","青岛"];

function getCity(provinceid){
var objsel=document.getElementById("city");
var pcity;
objsel.options.length=0;
pcity=city[provinceid];
for(var i=0;i<pcity.length;i++){
objsel.options[i]=new Option(pcity[i],pcity[i]);
}
}

var strurl="http://192.168.3.10/Images/Face/face1.gif";
var spos;
spos=strurl.indexOf("//")+2;
strurl=strurl.substring(spos);
spos=strurl.indexOf("/")+1;
strurl=strurl.substring(spos);
alert(strurl);

function changecolor(objnode){
var allnode=document.getElementsByTagName("div");
for(var i=0;i<allnode.length;i++){
allnode[i].className="start";
}
    objnode.className="stop";
}
</script>
<style type="text/css">
.start{width:60px;
       background-color:#00FF00;
   border-style:solid;}
.stop{ width:60px;
       background-color:#FF0000;
   border-style:solid;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  省
    <label>
  <select name="province" id="province" onchange="getCity(this.value)">
    <option value="0">河北</option>
    <option value="1">山西</option>
    <option value="2">山东</option>
  </select>
  市</label>
  <label>
  <select name="city" id="city">
     <option value="-1">请选择城市</option>
  </select>
  </label>
</form>
<div class="start" onclick="changecolor(this)">111</div><br />
<div class="start" onclick="changecolor(this)">222</div><br />
<div class="start" onclick="changecolor(this)">333</div><br />
<div class="start" onclick="changecolor(this)">444</div><br />
</body>
</html> var allnode=document.getElementsByTagName("div");
for(var i=0;i<allnode.length;i++){
allnode[i].className="start";
}
    objnode.className="stop";
}
<STYLE type="text/css">.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ECF8FF 1px solid; BORDER-LEFT: #ECF8FF 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ECF8FF 1px solid; BACKGROUND-COLOR: #CAEBFF }
.sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #CAEBFF 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #ECF8FF }
</STYLE>
<SCRIPT language="javascript">
     function secBoard(n)
  {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
    secTable.cells[n].className="sec2";

  }
</SCRIPT><TABLE id="secTable" runat="server"  >
<TBODY>
<TR align="center" height="20">
<TD class="sec2" id="TDInfo" runat="server" onClick="secBoard(0)" width="10%"><font size="2">基本信息</font></TD>
<TD class="sec1" onClick="secBoard(1)" width="10%"><font size="2">档案</font></TD>
<TD class="sec1" onClick="secBoard(2)" width="10%"><font size="2">学籍</font></TD>
<TD class="sec1" onClick="secBoard(3)" width="10%"><font size="2">待遇</font></TD>
<TD class="sec1" onClick="secBoard(4)" width="10%"><font size="2">调动</font></TD>
</TR>
</TBODY>
</TABLE>可以用sec1、sec2来控制img样式