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]);

OK たぶん、これを尋ねるより良い方法があります。 ここに私が取り組んできたいくつかのコードの写真があります。 うまくいきませんが、正しい部分もあると思います。 どのように組み合わせていくかを考えているところです。

4

0 に答える 0