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

Question

I'm trying to create an interactive photo gallery that displays thumbnails of images and on mouse-over enlarges them. 我正在尝试创建一个交互式照片画廊，该画廊显示图像的缩略图并在鼠标悬停时将其放大。 I have created the following code, however, when I move the mouse over each photo, it has no effect. 我创建了以下代码，但是，当我将鼠标移到每张照片上时，它没有任何作用。

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

What is wrong with my code? 我的代码有什么问题？

Answer 1

Change following line 更改以下行

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

to 至

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

secondly change "changeImage('harry potter')" to "changeImage('harrypotter')" as you are matching with space. 其次，当您与空间匹配时，将"changeImage('harry potter')"更改为"changeImage('harrypotter')" 。 I have tested it by creating a page and running it on firefox. 我已经通过创建一个页面并在firefox上运行它进行了测试。 check this fiddle. 检查这个小提琴。 Images are coming from net in this fiddle so may be slow in loading. 图片来自网络，因此加载速度可能较慢。

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

问题描述

1 个解决方案

解决方案1
0 2016-02-11 15:45:04

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

问题描述

1 个解决方案

解决方案1 0 2016-02-11 15:45:04

解决方案1
0 2016-02-11 15:45:04