0

名前が選択されたときに画像を変更するためのjavascript配列があります（Waterfall、Sunset、WhiteTree）。今はドロップダウンメニューの形になっていますが、通常の順不同リストに変更できるのではないかと思います。jqueryを使いたくない。

配列を順序付けられていないリストに変更できない場合、ユーザーの操作（クリック）に基づいてdivのコンテンツを変更する他の方法はありますか？つまり、画像の下に3つの異なるリンクがあります。リンクをクリックすると、別の画像がdivに読み込まれます。これは、1つの関数で実行する必要があります。

HTML

    <body>

    <img src="images/photo1.jpg" name="sunset">

    <ul> 
<select onClick=imageSwap(this) name=cached>
    <option value=image1>Sunset</option>
    <option value=image2>Waterfall</option>
    <option value=image3>White Tree</option>
</select>
    </ul>

    </body>

JAVASCRIPT

    if(document.images) {
    imageSwap = new Array();

    image1 = new Image()
    image1.src = "images/photo1.jpg"
    image2 = new Image()
    image2.src = "images/photo2.jpg"
    image3 = new Image()
    image3.src = "images/photo3.jpg"

    function imageSwap(list) {

    var img = list.options[list.selectedIndex].value; 

    document.sunset.src = eval(img + ".src");
    }
    }
4

1 に答える 1

0

次のようなリンクを作成できます。

<a href="#" onclick="changeImg('image1.jpg')">Image 1</a>
<a href="#" onclick="changeImg('image2.jpg')">Image 2</a>

そして関数：

function changeImg(src) {
  document.getElementById("imgId").src = src;
}

ここで、imgIdは<img>要素の ID です。

次に例を示します。

http://jsfiddle.net/6WS2K/4/

于 2013-02-04T20:00:43.670 に答える