Question

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

我已经看到这个问题得到了回答，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]);

OK Maybe there's a better way to ask this. Here's a pic with some code I've been working on. It doesn't work but I think it has some parts that are right. I'm just trying to figure out how to put it together.

从数组更改背景

0 个答案: