问JS替换img的alt、src和a的href的代码


<!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>
<title>例子</title>
<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}
window.onload = function(){
    $("link").href = "http://www.aaa.com";
    $("picture").src = "http://000.com/1.gif";
    $("picture").alt = "111";
}
</script>
</head>
<body>
 <a id="link"   href="http://www.123.com"   target="_blank"><img id="picture" src="http://www.123.com/1.gif" alt="abc" /> </a> 
</body>
</html>JS的代码能否放在HEAD中，不通过onload,或者onclick等实现这样的效果？ 
这一句不理解。。如果你是要直接通过js创建这个新的链接就没必要出这样的替换题 如果是需要替换的话总有个触发的条件吧 自己想怎么触发就参考着写吧

解决方案 »

  1.   

    标签带ID时zhengshaodong的代码可以解决问题,而且比我现在所要找到的代码更为简洁,高手!
    但是我想要替换的标签是不带ID的.因为不能在标签加上ID值的!所以有没有在标签不带ID的值时,用JS代码实现替换效果?
      

  2.   

    即在标签不带ID的值时,能否用用JS代码实现替换
      

  3.   

    那你页面要是页面有多少<a></a>标签 你难道要全部换成一样吗 如果说要换成一样的 简单
    document.getElementsTagName()可以解决
    如果是换成不一样的话就没办法了 你怎么确定哪个标签？
      

  4.   

    可以用zhengshaodong说的document.getElementsTagName或者图片索引，其实不应该用onload去加载的，因为这样会等到页面全部加载，并且所有图片加载完才调用函数，我是不主张这样做的，直接在文档最后直接调用函数最好。<script type="text/javascript">
    window.onload=function(){
        var img=document.getElementsByTagName("img");
        //var img=document.images;这个也行
        for(var i=0;i<img.length;i++){
        img[i].alt="111";
        img[i].src="http://000.com/1.gif";
        img[i].parentNode.href="http://www.aaa.com";
        }
    }
    </script>
    <body>
    <a href="http://www.123.com" target="_blank"><img alt="abc" src="http://123.com/1.gif"></a>
    <a href="http://www.aaa.com" target="_blank"><img alt="111" src="http://000.com/1.gif"></a>
    </body>
      

  5.   

    nicholsky和zhengshaodong的方法都可行,但是只想改变带有href="http://www.123.com"和alt="abc" src="http://123.com/1.gif"的标签如果把想要改变的标签放在DIV标签内,并加上ID值,如:
    <div id="d1">
    <a href="http://www.123.com" target="_blank"><img alt="abc" src="http://123.com/1.gif"></a>
    <div>
    可否把id="d1"的DIV内<a> </a>的href、alt、src改变呢？如果实在不行
    可否直接把DIV内的内容全部替换？
    感谢各位解答！
      

  6.   

    <div id="here">
    <a href="http://www.123.com" target="_blank"><img alt="abc" src="http://123.com/1.gif"></a>
    <a href="http://www.aaa.com" target="_blank"><img alt="111" src="http://000.com/1.gif"></a>
    <div>
    <script type="text/javascript">    var hrefs = document.getElementById("here").getElementsByTagName("a");
        for(var i = 0, len = hrefs.length; i < len; i++){
    hrefs[i].href = "http://zhan.zhmy.com";
    hrefs[i].firstChild.alt = "zhan";
    hrefs[i].firstChild.src = "aa.jpg";
        }</script>
      

  7.   

    <!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=gbk" />
    <title>   </title>
    <script type="text/javascript">
    window.onload=function(){
            var hrefs=document.getElementById("footer").getElementsByTagName("p");
            for(var i=0,len=hrefs.length;i<len;i++){
    hrefs[i].href="http://www.myblog.cn/";
    hrefs[i].firstChild.alt="";
    hrefs[i].firstChild.src="http://www.myblog.cn/aa.jpg";
            }
    }
    </script>
    </head><body>
        <div id="footer">
    <div class="ces">   <p id="copyright">
    Powered by <strong><a href="http://www.mypace.net" target="_blank"></a></strong>
    &copy; 2001-2007 mypace <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
    _uacct = "UA-2941364-1";
    urchinTracker();
    </script> <a href="http://www.mypace.net" target="_blank"><img alt="mypace" src="http://www.mypace.net/1.gif"></a> <a href="http://www.mypace.net" target="_blank"><img alt="mypace" src="http://www.mypace.net/2.gif"></a>  </p> </div>
    </div>
    </body>
    </html>以上是想实现的代码，但是按zhanjia所说的方法 不能实现把http://www.mypace.net改为http://www.myblog.cn/，alt和src都是同样问题，提示对象不支持此属性或方法？不知问题如在？
      

  8.   

    看来你对getElementById, getElementsByTagName, firstChild这都还不清楚啊, 上网找些资料看看吧.
    你全用错了var hrefs=document.getElementById("footer").getElementsByTagName("p")[0].getElementsByTagName("a"); 
      

  9.   


    这样子？
    <!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>
    <title>例子</title>
    <script type="text/javascript">
    window.onload = function(){
        var links = document.getElementsByTagName("a");
        for(var i = 0; i < links.length; i++)
        {
            if(links[i].href == "http://www.1.com/")
            {
                links[i].href = "http://www.google.com";
            }
        }
        var imgs = document.getElementsByTagName("img");
    }
    </script>
    </head>
    <body>
    <a href="http://www.1.com"><img src="http://www.1.com/1.gif" alt="1.gif" /></a>
    <a href="http://www.2.com"><img src="http://www.2.com/2.gif" alt="2.gif" /></a>
    </body>
    </html>
      

  10.   


    <!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" src="jquery-1.2.1.js"></script><!--引入jQuery类库-->
    <!--想了解jQuery的相关方法定义--"http://jquery.org.cn/visual/cn/index.xml"-->
    </head>
    <body>
    <a href="http://www.123.com" target="_blank"><img alt="abc" src="http://123.com/1.gif"></a> 
    </body>
    <script type="text/javascript">
    $("a[@target='_blank']").attr("href","http://www.aaa.com");
    //获取带有target属性,并且其值为"_blank"的<a>元素,再用attr方法把其href属性的值设置为你想要的值.
    $("a[@target='_blank'] img").attr("alt","111").attr("src","http://000.com/1.gif");
    //这里跟上面的原理类似,"$("a[@target='_blank'] img")"后面的img表示<a>元素的<img>子元素.
    </script>
    </html>js代码一般放在head标签里。如1楼所说的直接用js把连接改变没有必要，你自己可以定义一个触发事件，
    我把js代码放在<body>后面只是为了直接看到效果。jQuery是个很不错的js类库，学起来也不会很难。
      

  11.   


    <!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=gbk"   /> 
    <title>       </title> 
    <script   type="text/javascript"> 
    function aa(){ 
    var hrefs=document.getElementById("footer").getElementsByTagName("p")[0].getElementsByTagName("a");
    for(var i=0;i<hrefs.length;i++){ 
    hrefs[i].href="http://www.myblog.cn/"; 
                    var _hrefs =hrefs[i].getElementsByTagName("img")[0];
                    if (typeof(_hrefs)=="object"){ 
    _hrefs.src ="http://www.myblog.cn/aa.jpg";
             _hrefs.alt ="hahahaha";
                    }
           } 
    } 
    </script> 
    </head> <body> 
            <div   id="footer"> 
    <div   class="ces">     <p   id="copyright"> 
    Powered   by   <strong> <a   href="http://www.mypace.net"   target="_blank"> </a> </strong> 
    &copy;   2001-2007   mypace   <script   src="http://www.google-analytics.com/urchin.js"   type="text/javascript"> </script> 
    <script   type="text/javascript"> 
    _uacct   =   "UA-2941364-1"; 
    urchinTracker(); 
    </script>   <a   href="http://www.mypace.net"   target="_blank"> <img   alt="mypace"   src="http://www.mypace.net/1.gif"> </a>   <a   href="http://www.mypace.net"   target="_blank"> <img   alt="mypace"   src="http://www.mypace.net/2.gif"> </a>     </p> </div> 
    </div> 
    <script   type="text/javascript"> 
    aa();
    </script</body> 
    </html> 
    如果不用onload就把函数在后面来执行啦.下面的内容没加载完的话就,用onload的话好像会找不到ID吧.
      

  12.   

    第12楼zhengshaodong和第14楼lzdk2003的为正解!
     还有谢谢nicholsky zhanjia mk_free的解答,帮助也很大,谢谢!
      

  13.   

    谢谢mk_free的贴子的建议，但因为看不懂所以没有打分，zhengshaodong是最先回答正确的，但贴子分不多，所以只能给12分，见谅！