zoukankan      html  css  js  c++  java
  • 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);
        }
  • 相关阅读:
    0326系统按钮添加权限的工作(jsp权限写法)
    0321菜单数据
    ztree树的递归
    前端padding margin
    解决1像素边框问题
    水平垂直居中
    移动端css公共样式
    tap方法改良this指向
    移动端常见问题
    前端笔记(兼容)
  • 原文地址:https://www.cnblogs.com/vivenZ/p/6420444.html
Copyright © 2011-2022 走看看