1

我在页面的一侧显示了三个缩略图。

单击时，需要在页面中间显示完整大小的图像，并在其下方显示文本。缩略图的大小mouseover也需要稍微增加，我已经编码过。我的主要问题是要显示完整尺寸的图像。

这是我所拥有的：

        <!DOCTYPE html>
<html>
    <head>
        <title>Homework 3, CSS Styles</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    img:hover
       {
        transform: scale(1.250,1.250);
                padding:5px;
       }
    #right
       {
       position:absolute;
       top:50px;
       right:100px;
       left:250px;
           bottom:200px;
           } 

    </style>
    <script>
    function changeSize(id)
    {
    var mainImage=document.getElementById("mainImage");
    var someImage=document.getElementById(id);
    mainImage.src=someImage.src;
    }
    </script>

    </head>   
    <body>    
        <div align="center"><img id="mainImage" style="max-width:auto; max-height:auto" align="middle" src="blank.jpg" 
alt="blank"/></div>
        <table>
            <tr>
                <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="cluster" src="cluster1.png" 
alt="cluster" onClick="changeSize(id)"/></span></td>
            </tr>
            <tr>
                <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="gas" 
src="gas1.png" alt="gas" onClick="changeSize(id)"/></span></td>
            </tr>
            <tr>
                <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" 
id="launch" src="launch1.jpg" alt="launch" onClick="changeSize(id)"/></span></td>
            </tr>

        </table>
    </body>
</html>

我不确定这是最好的方法，所以建议在那里表示赞赏。

4

1 回答 1

0

目前尚不清楚您到底想做什么，但您应该将脚本包装到 onload 处理程序中。否则，您将无法获得对 DOM 元素的引用。例如：

var boot = function() {
    var main=document.getElementById("mainImage");
    var someImage=document.getElementById("someImage");
    main.src=someImage.src;
}
var changeSize = function() {

}

if (window.addEventListener) {
    window.addEventListener('load', boot, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', boot);
}
于 2013-09-28T21:01:07.687 回答