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