Viven

8小时计划!

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
<ul>
    <li>
        <a href="images/666.jpg" title="frist img">frist</a>
    </li>
    <li>
        <a href="images/777.jpg" title="second img">second</a>
    </li>
    <li>
        <a href="images/888.jpg"  title="three img">three</a>
    </li>
    <li>
        <a href="images/1111.jpg"  title="four img">four</a>
    </li>
</ul>
<img id="placeholder" width="500" height="500" src="" title="this is all img show">

要实现点击a元素 替换下面的图片。可以用以下方法实现

function showImg(dom){
        var src = dom.getAttribute("href");
        var img = document.getElementById("placeholder");
        img.setAttribute("src",src);
    }
    var A = document.getElementsByTagName("a");
    for(var i =0;i< A.length;i++){
        A[i].onclick = function(){
            showImg(this);
            return false;
        }
    }

那么如果我们需要 替换img里面的title属性该怎么办呢?可以通过改写showImg来实现

    function showImg(dom){
        var text = dom.getAttribute("title");
        var src = dom.getAttribute("href");
        var img = document.getElementById("placeholder");
        img.setAttribute("src",src);
        img.setAttribute("title",text);
    }

 

posted on 2017-02-20 20:16  Viven张  阅读(243)  评论(0编辑  收藏  举报