Question

我正在尝试创建一个显示图像缩略图的交互式照片库，并在鼠标悬停时放大它们。我创建了以下代码，但是，当我将鼠标移到每张照片上时，它没有任何效果。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script>
var photos  = [];

photos.push({ image: "harrypotter.jpg", title: "Harry Potter" });
photos.push({ image: "lordoftherings.jpg", title: "Lord of the Rings" });
photos.push({ image: "backtothefuture.jpg", title: "Back To The Future" });


function changeImage(name)
{
  var photo;
  switch(name) {
    case "harrypotter":
        photo = photos[0];
    break;

    case "lordoftherings":
        photo = photos[1];
    break;

    case "backtothefuture":
        photo = photos[2];
    break;
  }

  var photogallery = document.getElementById("photogallery");
  var image = photogallery.getElementsByTagName("image");
  var title = photogallery.getElementsByTagName("h3");
  image[0].src = photo.image;
  title[0].innerHTML = photo.title;
}
</script>
</head>

<body>
<div id = "main">
 <h2> <u> Photo Gallery </u> </h2>
 <p> The following photos are the DVD covers of my favourite film. </p>


<div id="thumbnails">
    <img src="harry potter.jpg" onmouseover="changeImage('harry potter')" alt = "Harry Potter Film Cover" width="110px" height="110px" />
    <img src="lordoftherings.jpg" onmouseover="changeImage('lordoftherings')" alt = "Lord of the Rings Film Cover" width="110px" height="110px" />
    <img src="backtothefuture.jpg"        
onmouseover="changeImage('backtothefuture')" alt = "Back To The Future Film Cover" width="110px" height="110px" />
</div>
<div id="photogallery">
    <img src="harrypotter.jpg" alt="Harry Potter Film Cover" /><br />
<h3><em>Harry Potter</em></h3>
</div>
</div>
</body>
</html>

我的代码出了什么问题？

Answer 1

更改以下行

var image = photogallery.getElementsByTagName("image");

到

var image = photogallery.getElementsByTagName("img");

当您与空间匹配时，其次将"changeImage('harry potter')"更改为"changeImage('harrypotter')"。我通过创建一个页面并在firefox上运行它来测试它。 check this fiddle. 在这个小提琴中，图像来自网络，因此加载速度可能会很慢。

如何使用HTML和JavaScript创建交互式照片库

1 个答案: