How do I create an interactive photo gallery using HTML and JavaScript
<p>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. </p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt; Photo Gallery&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="stylesheet.css" /&gt;
&lt;script&gt;
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;
}
&lt;/script&gt;
&lt;/head&gt;

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


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

<p>What is wrong with my code? </p>