0
J'essaie de créer une galerie de photos interactive qui affiche les vignettes des images et les agrandit au survol de la souris. J'ai créé le code suivant, cependant, lorsque je déplace la souris sur chaque photo, cela n'a aucun effet.Comment créer une galerie de photos interactive en HTML et JavaScript
<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>
Quel est le problème avec mon code?