Question

我是JavaScript新手。我想让预览图像成为单独窗口中更大图像的可点击链接。就像亚马逊或eBay一样。下面是我到目前为止的代码，它适用于鼠标和预览，但我无法弄清楚如何获得放大图像的可点击链接。谢谢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style>
            .preview {
            width:350px;
            height:150px}

            .thumb {
            width:125px;
            height:50px}{
            margin-right:3px;}

            .normal {
            border:3px solid #000000;}

            .selected {
            border:3px solid #ff0000;}
        </style>
    </head>
    <body>
        <img id="0" class="preview normal" src="" alt="preview" /><br>
        <p>
            <img id="1" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlhOGY1ZjBhY2UyNjMwMjE4MDJjMzZhODM2NGY2OWI=" alt="Red Belt Blk Buckle" onmouseover="preview(this)"/>
            <img id="2" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MzIxOWZhZmQyZTZkZTg1ZDQzYjI4MmIyYzU1MWU2Njg=" alt="Red Belt Nkl Buckle" onmouseover="preview(this)"/>
            <img id="3" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MjlhOTQ1N2Y4OGM2Y2I4OWIzY2I4YjZiMjU2N2MxZmM=" alt="Red Waist" onmouseover="preview(this)"/>
        <p>
            <img id="4" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YjE5MWRmMThhOTE3YWFjMzlkNDcyYzcwMWIxNzRlMWE=" alt="Red Waist" onmouseover="preview(this)"/>
            <img id="5" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlkMzY0YWZkMDUzNjcxNzlkMTRhZTIyZjFmOTk1YTM=" alt="Red Blk Buckle" onmouseover="preview(this)"/>
            <img id="6" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YzdkZjcyZWVkZWQ1Y2Y4NjY2ZDFhY2EzYjU2NDA3OWQ=" alt="Red Nkl Buckle" onmouseover="preview(this)"/>
        <script>
            var lastImg = 1; //Set initial thumbnail and preview
            document.getElementById(0).src = document.getElementById(lastImg).src;
            document.getElementById(lastImg).className = "thumb selected";

            function preview(img) {
                document.getElementById(lastImg).className = "thumb normal";
                img.className = "thumb selected";
                document.getElementById(0).src = img.src;
                lastImg = img.id
            }
        </script>
    </body>
</html>

简单的JavaScript图像缩略图查看器，带有可点击的放大图像

0 个答案: