使用 CSS 使单击的缩略图显示全尺寸

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

单击时，全尺寸图像需要显示在页面中间，其下方有文本。缩略图的大小也需要在我已经编码的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>

我不确定这是最好的方法，所以在那里提出建议是值得赞赏的。

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

相关内容

最新更新

热门标签：