Question

我看不出为什么我的onmouseover功能不起作用。它显示所有缩略图，但当鼠标位于其上时，它不会使图像变大。它实际上根本不显示图像，即使点击也不显示。这是我的功能，接着是div：

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="/sketch_jumpingman_pink_64.ico">
    <link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
    <title>My website</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        var photos  = [];

        photos.push({ image: "gallery1.jpg", title: "The Gallery" });
        photos.push({ image: "gallery2.jpg", title: "The Gallery" });
        photos.push({ image: "lr1.jpg", title: "The Lecture Room" });
        photos.push({ image: "lr2.jpg", title: "The Lecture Room" });

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

            case "thelectureroom":
                photo = photos[1];
            break;
          }

          var photogallery = document.getElementById("photogallery");
          var image = photogallery.getElementsByTagName("img");
          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>
        <div id="thumbnails">
            <img src="gallery1.jpg" onmouseover="changeImage('thegallery')" alt = "The Gallery" width="110px" height="110px" />
            <img src="gallery2.jpg" onmouseover="changeImage('thegallery')" alt = "The Gallery" width="110px" height="110px" />
            <img src="lr1.jpg" onmouseover="changeImage('thelectureroom')" alt = "The Lecture Room" width="110px" height="110px" />
            <img src="lr2.jpg" onmouseover="changeImage('thelectureroom')" alt = "The Lecture Room" width="110px" height="110px" />
        </div>
        </div>
</body>
</html>

互动照片库：onmouseover不起作用

0 个答案: