JavaScript图片

<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);
    }
原文地址:https://www.cnblogs.com/vivenZ/p/6420444.html