0

我的网站上有一个图片库，其中有一个带有标题的大显示图像和下面 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

0

我只是快速浏览了您的代码，但尝试更改此行：

document.getElementById('link').href = whichpic.video;

有了这个：

document.getElementById('link').href = whichpic.getAttribute('video');

编辑 2::

尝试将视频 url 作为参数传递给脚本。

onclick="return showPic(this,'theUrlStringfromTheVideoTag');

然后在js中更改以下行。

function showPic (whichpic,url) { 
document.getElementById('link').href =url;
于 2013-05-12T03:49:06.000 回答