如何獲得圖庫以將顯示圖像更改為縮略圖圖像？

Question

我該如何通過圖庫將大圖像更改為縮略圖圖像？ 我似乎無法正常工作。 我需要將縮略圖的src屬性轉換為大src屬性值的值。

<html>
<head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="CSSChloe.css">

</head>
<body id = "bodyc">
    <div id = "space1">
    </div>
        <div id = "header">
        <div class="image">
        <img src = "Banner.png" alt= " " width="257" height="43" />
        <h4> text</h4>
        </div>
        </div>
        <div id = "space2"> </div>
        <div id= "menuBack">
            <div id= "menu1"><a href="index.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
            <div id= "menu1"><a href="about.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
            <div id= "select"><a href="photo.html" style="text-decoration:none;">           
            <img src = "back.png" alt = " " width = "257" height = "48" style = "position: absolute; left: -14px; top: -5px;" />
            <p id = "menu2" style = "position: absolute; margin-top: 2%;">Photo Gallery</p></a>
            </div>
            <div id= "menu1"><a href="price.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
            <div id= "menu1"><a href="testimontials.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
            <div id= "menu1"><a href="contact.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
            <div id= "menu3"><img src ="photographylogo.png" width = "150" height = "125" /></div> 
        </div>
        <div id = "space3"> </div>
        <div id= "content">
        <div style = "width: 60%; height: 100%; float: left;">
        <img id = "big" src ="test1.png" width = "400" height = "350" style = "margin-top: 5%; margin-left: 8%;" />
        </div>
        <div style = "width: 35%; height: 100%; overflow: auto; float:right;">
        <img id = "thumb1" onclick = "thumbFunc('test2.png');" src = "test2.png" width = "150" height = "100" />
        <img id = "thumb2" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb3" src = " " width = "150" height = "100" />
        <img id = "thumb4" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb5" src = " " width = "150" height = "100" />
        <img id = "thumb6" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb7" src = " " width = "150" height = "100" />
        <img id = "thumb8" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb9" src = " " width = "150" height = "100" />
        <img id = "thumb10" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb11" src = " " width = "150" height = "100" />
        <img id = "thumb12" src = " " width = "150" height = "100" />
        <br/>
        <img id = "thumb13" src = " " width = "150" height = "100" />
        <img id = "thumb14" src = " " width = "150" height = "100" />
        </div>
        </div>
        <script>
        function thumbFunc(a)
        {
        document.getElementById("big").setAttribute(src, a);
        }
        </script>
</body>
</html>

Answer 1

首先，更改在線單擊時調用函數的方式：

onclick="thumbFunc('test2.png');"

這樣做，因此您不必再次放置圖像路徑：

onclick="thumbFunc(this.src)"

然后，更改您的JavaScript：

document.getElementById("big").setAttribute(src, a);

為此（如果您更喜歡簡單的方法）：

document.getElementById("big").src = a;

或者，如果您仍要堅持使用setAttribute方法，請不要忘記將屬性（src）括在"符號中：

document.getElementById("big").setAttribute("src", a);

工作演示

如何獲得圖庫以將顯示圖像更改為縮略圖圖像？

問題描述

1 個解決方案

解決方案1
0 已采納 2014-05-21 02:42:03

如何獲得圖庫以將顯示圖像更改為縮略圖圖像？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-05-21 02:42:03

解決方案1
0 已采納 2014-05-21 02:42:03