Question

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

单击时，需要在页面中间显示完整尺寸的图像，并在其下方显示文本。缩略图需要在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>

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

Answer 1

目前尚不清楚您想要做什么，但是您应该将脚本包装到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);
}

使用CSS可以使点击的缩略图显示为完整大小

1 个答案: