框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片库</title>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<h1>图片库</h1>
<ul>
<li>/*鼠标点击触发onclick(事件处理函数从而触发shoPic函数)(当事件处理函数调用javascript代码时,用双引号包含,分号分开) "this" 表示"这个对象" 即将a标签这个元素节点传递给js代码 return false代表取消a标签的默认动作:即开启另一个网页*/
<a href="img/5a7431f1d312c.png" οnclick="showPic(this);return false;" title="A">A</a>
</li>
<li>
<a href="img/5a7431f1d323b.png" οnclick="showPic(this);return false;" title="B">B</a>
</li>
<li>
<a href="img/5a7431f1d330f.png" οnclick="showPic(this);return false;"title="C">C</a>
</li>
<li>
<a href="img/5a7431f1d337a.png"οnclick="showPic(this);return false;" title="D">D</a>
</li>
<li>
<a href="img/5a7431f1d3449.png"οnclick="showPic(this);return false;" title="E">E</a>
</li>
<li>
<a href="img/5a7431f1d3519.png"οnclick="showPic(this);return false;" title="F">F</a>
</li>
<li>
<a href="img/5a7431f1d3582.png"οnclick="showPic(this);return false;" title="G">G</a>
</li>
</ul>
<img id="placeholder" src="img/5a7431f1d3696.jpg" alt="my image gallery"/>
</body>
</html>
javascript代码
function showPic(whichpic){
var source=whichpic.getAttribute("href");/*getAttribute()函数搜索传递过来的元素节点的属性值"href",并且装在定量容器source里*/
var placeholder=document.getElementById("placeholder");/*取得id=placeholder的元素节点*/
placeholder.setAttribute("src",source);/*setAtttribute()函数 source取代src的位置*/
}
3168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
