JavaScript图片

最新推荐文章于 2024-10-11 12:42:44 发布

转载最新推荐文章于 2024-10-11 12:42:44 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vivenZ/p/6420444.html

文章标签：

#javascript #ViewUI

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);
    }