1

ページの横に 3 つのサムネイルを表示しています。

クリックすると、フルサイズの画像がページの中央に表示され、その下にテキストが表示される必要があります。サムネイルのサイズもわずかに大きくする必要がありますが、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 に答える