把图片的浏览链接集中安排在图片的主页面里，当用户点击某个图片的链接就能在当前网页显示
css:代码
ul,li{margin: 0;padding: 0}
body{font-family: "Helvetica","Arial","serif","微软雅黑";color:#333;background-color: #ccc; margin: 1px 10%}
h1{color:#333;background-color: transparent;}
a{ color: #ea183d; background-color: transparent;font-weight: bold;text-decoration: none;}
li{float:left;padding:1em;list-style: none;}
img{ display:block;clear:both;}
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图片切换</title>
<meta content="text/html" charset="utf-8">
<link rel="stylesheet" href="css/show.css"/>
</head>
<body>
<h1>picture</h1>
<ul>
<!----------------- this表示：“这个a元素节点” ----------------------->
<!----------------------返回值为true表示链接被点击 为false表示没被点击-------------------------->
<li>
<a href="images/picture1.jpg" title="milk" onclick="showPicture(this);return false;">
牛奶</a>
</li>
<li>
<a href="images/picture2.jpg" title="Maternal and infant" onclick="showPicture(this);return false;">
儿童</a>
</li>
<li>
<a href="images/picture3.jpg" title="The goddess" onclick="showPicture(this);return false;">
女神</a>
</li>
<li>
<a href="images/picture4.png" title="9.9 packages mailed" onclick="showPicture(this);return false;">
9.9</a>
</li>
</ul>
<img id="placeholder" src="images/picture5.jpg" alt="myimage gallery"/>
<p id="description">Choose an image.</p>
</body>
<script type="text/javascript" src="show.js/show.js"></script>
</html>
js:
function $(id){
return document.getElementById(id);
}
function showPicture(obj){
var placeholder=$("placeholder");
var source=obj.getAttribute("href");
placeholder.setAttribute("src",source);//用setAttribute改变图片的src属性；
// placeholder.src = source;//非DOM方案改变图片的src属性；
//在图片链接被点击时动态地用图片的title替换掉图片说明
var text=obj.getAttribute("title");//获取obj对象的title属性值并赋给变量text
var description=$("description");//得到p元素的id
description.firstChild.nodeValue = text;//用text变量刷新id值等于description的p元素的第一个子节点的nodeValue属性值；
}
时间： 2025-01-16 01:20:48