0

この画像 ( http://i.stack.imgur.com/8juB3.jpg )のレイアウトを利用して、シンプルなギャラリーを作成しようとしています。閲覧者がページに移動すると、最初にテキスト/画像コンテンツがメイン ボックスに表示され、画像が小さいボックスに表示されるようにしたいと思います。視聴者が小さなボックスの 1 つをクリックすると、それに応じてメイン ボックスのコンテンツが変更されるようにしたいと考えています。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです、ありがとう!

ありがとう！

4

1 に答える 1

0 
<img src="something.jpg" onclick="changeX1()" /> //That's an example of the img tag on HTML:
<div id="gallery">Initial text</div> //This is the place where the big image will be shown, initially with text.

Javascript:

var x=0
var y=document.getElementById("gallery");
}
function changeX_1(){
    x=1
    changePic();
}

function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(something)";
            break;    
    }
}

私が行ったことは、x と y の 2 つの変数を作成することです。「x」は画像番号、「y」は背景になります。画像をクリックすると、「x」が変更され、y の innerHTML が削除され、背景画像が変更されます。

この例では 1 つの画像のみを使用しましたが、実際のギャラリーはさらに多くの画像で構成されます。追加する写真ごとに、新しい「changeX」関数と別のケースが必要になります。

JavaScript を知らない場合は、学ぶ必要があります :)

編集：

var x=0
var y=document.getElementById("gallery");
}
function changeX1(){
    x=1
    changePic();
}
function changeX2(){
    x=2
    changePic();
}


function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbookcolor.jpg?7024)";
            break;    
        case 2:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Videocolor.jpg?7178)";
            break;    
    }
}
于 2013-09-11T03:43:03.327 に答える