0

サイトに画像ギャラリーがあり、キャプション付きの大きな表示画像が 1 つと、その下に 3 つの小さなサムネイル画像があります。現在、さまざまなサムネイルをクリックしたときに表示画像とキャプションを入れ替えることができる JavaScript があります。私の最終目標であり、私が苦労しているのは、それぞれの大きなディスプレイ画像を別のビデオにリンクさせることです.

表示画像とキャプションのスワッピングには機能しますが、リンクのスワッピングには機能しない私の欠陥のあるJavaScriptは次のとおりです。

function showPic (whichpic) { 
    if (document.getElementById) { 
        document.getElementById('placeholder').src = whichpic.href;
        document.getElementById('link').href = whichpic.video;
        if (whichpic.title) { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
        } else { 
            document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
        } 
        return false; 
    } else { 
        return true; 
    } 

}

HTML は次のとおりです。

<div id="itemart">
    <script src="js/showPic.js" type="text/javascript" language="javascript"></script>
        <a id="link" href="http://www.youtube.com/watch?v=SgARL8aHl8Q" title="Video Title" class="lightbox" data-height="480"><img id="placeholder" src="img/Coke_01_AnimationStoryboard.png" alt="Coca-Cola Plastic Recycling Animation." /></a>
        <p id="desc">Display image 01 caption.</p>
        <ul class="thumbnails">
            <li><a onclick="return showPic(this)" href="img/Coke_01_AnimationStoryboard.png" title="Coca-Cola plastic recycling animation storyboard." video="http://www.youtube.com/watch?v=SgARL8aHl8Q"><img name="itemarttthumbnail1" width=50 height=50 src="img/thumbs/Coke_01_thumb01.png" alt="Cola-Cola Plastic Recycling Animation" style="background-color: #00FF66" /></a></li>
            <li><a onclick="return showPic(this)" href="img/Coke_02_AnimationStoryboard.png" title="Coca-Cola aluminum recycling animation storyboard." video="http://www.youtube.com/watch?v=Wq2GbbMJ20Q"><img name="itemarttthumbnail2" width=50 height=50 src="img/thumbs/Coke_02_thumb02.png" alt="Coca-Cola Aluminum Recycling Animation" style="background-color: #00FF66" /></a></li>
            <li><a onclick="return showPic(this)" href="img/Coke_03_AnimationStoryboard.png" title="Coca-Cola glass recycling animation storyboard." video="http://www.youtube.com/watch?v=qU5TOA3kWPs"><img name="itemarttthumbnail3" width=50 height=50 src="img/thumbs/Coke_03_thumb03.png" alt="Coca-Cola Glass Recycling Animation" style="background-color: #00FF66" /></a></li>
        </ul>

</div>

私はJavascriptにあまり慣れていないので、非常に明白な何かを見落としている可能性があります。どんな助けでも大歓迎です。

4

1 に答える 1