0

我在一个页面上有一组缩略图。我希望它们是可点击的，当点击时，我希望该图像填充页面上的另一个元素作为平铺背景。而已。

我已经看到这个问题得到了回答，而 JQuery 似乎是首选答案。我是 javascript 的新手，在继续深入之前，我试图更好地理解 js 中的逻辑。

无论如何，我有一些可以正常工作的代码（见下文），但我知道它非常笨拙。

<style>
       #bkgdPreview {
        position: absolute;
    background-image: url(images/weblinks/Octopus2-bkg.jpg);
    width: 350px;
    height: 350px;
    top: 115px;
    left: 530px;
    }
</style>

<script type="text/javascript">

function change1() {
    document.getElementById("bkgdPreview").style.backgroundImage="url('images/weblinks/image-1.jpg')";
}

function change2() {
    document.getElementById("bkgdPreview").style.backgroundImage="url('images/weblinks/image-2.jpg')";
}

function change3() {
    document.getElementById("bkgdPreview").style.backgroundImage="url('images/weblinks/image-3.jpg')";
}

</script>
</head>
<body>

<div id="gallery">

        <div id="bkgdPreview">
            <p>some text</p>
        </div>
              <div id="thumbnail">
               <a href="#"><img src="images/weblinks/image-1.jpg" width="60" height="60" onclick="change1()"/></a>
               <a href="#"><img src="images/weblinks/image-2.jpg" width="60" height="60" onclick="change2()"/></a>
               <a href="#"><img src="images/weblinks/image-3-bkg.jpg" width="60" height="60" onclick="change3()"/></a>
             </div>

我发布的第一个代码示例按原样工作。但我知道有更好的方法来编写它。我正在自己尝试一些东西，但它只是没有点击（请原谅双关语）。

我想编写一次函数，并通过单击的图像调用它。我只是不知道如何编写函数的最后一部分，或者图像是否应该是数组或对象组或其他东西的一部分。

一旦正确编写，我不确定如何调用该函数。如果可能的话，我还想将所有的 javascript 保存在一个单独的文件中。

var myImage = document.getElementById("bkgdPreview");

var imageArray = ["images/weblinks/image-1.jpg", "images/weblinks/image-2.jpg",
                "images/weblinks/image-3.jpg"];

// I don't know what the last part of the function should be
function changeImage() {
    document.myImage.style.backgroundImage="url(this)";
}

//I don't know how I should call the function other than putting it in the HTML
onclick.changeImage(imageArray[this]);

好吧也许有更好的方法来问这个。 这是一张我一直在处理的代码的图片。 它不起作用，但我认为它有一些正确的部分。 我只是想弄清楚如何将它们组合在一起。

4

0 回答 0