极客观点
项目管理
HarmonyOS
我照着书敲
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen">
<style>
</style>
<title>Image Zoo</title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="aa.jpg" title="A">
<img src="aa.jpg">
</a>
</li>
<li>
<a href="bb.jpg" title="B">
<img src="bb.jpg">
</a>
</li>
<li>
<a href="cc.jpg" title="C">
<img src="cc.jpg">
</a>
<li>
<a href="dd.jpg" title="D">
<img src="dd.jpg">
</a>
</li>
</ul>
<img id="placeholder" src="ee.gif" alt="myImage">
<p id="description">Choose an image</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
这是书配套的
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee">
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
我的图片名和书的不一样，
JS和CSS即使我复制他的，显示效果仍然不一样
这到底是为什么呢？
这是JS代码
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0;i < links.length;i++) {
links[i].onclick = function() {
return !showPic(this);
}
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (document.getElementById("description")) {
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text + "Pics";
}
return true;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
这是CSS
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}
img {
display:block;
clear:both;
}
楼主说的这个不就是Image Replacement效果么