Question

我的网站上有一个图片库，其中有一个带有标题的大型显示图片，下面是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，所以我可能会遗漏一些非常明显的东西。任何帮助将不胜感激。

Answer 1

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

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

用这个：

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

编辑2 ::

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

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

然后改变js中的以下行。

function showPic (whichpic,url) { 
document.getElementById('link').href =url;

Javascript图像和图像库上的href交换

1 个答案: