首页 > 这里把img放入li中以小图标显示为什么会失败?

这里把img放入li中以小图标显示为什么会失败?

我照着书敲

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

图片用的是一样大的? 上CSS代码


书中,ul下的图片采用的是略缩图(thumbnail_***.jpg):

<a href="images/coffee.jpg" title="A cup of black coffee">
    <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>

但是你的代码里面,ul下的图片和#placeholder中的图片都是同一张。


楼主说的这个不就是Image Replacement效果么


cc那儿少了一个</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>

正确的应该是:


<li> <a href="cc.jpg" title="C"> <img src="cc.jpg"> </a> </li> <li> <a href="dd.jpg" title="D"> <img src="dd.jpg"> </a> </li>
【热门文章】
【热门文章】