如何使用HTML和JavaScript創建交互式照片庫

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上運行它進行了測試。 檢查這個小提琴。 圖片來自網絡，因此加載速度可能較慢。

如何使用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