代码之家 › 专栏 › 技术社区 › three3

为什么尝试替换图像源会让我浏览到该图像?

javascript-events javascript

0

three3 · 技术社区 · 14 年前

我对javascript还不太熟悉(仅仅读了几天书),而且我一直纠结于这个代码片段。我一遍又一遍地看了一遍,但似乎弄不明白它为什么不起作用。我确信这是我刚刚忽略的一件非常简单的事情,我只需要一双新的眼睛来看待这件事。

代码应该更新页面上的占位符图像,而不必重新加载页面。但是当我点击一个图片的链接时,它会把我带到图片所在的链接,而不是替换占位符图片。这是我的HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>

    <h1>Snapshots</h1>
    <ul>
        <li>
        <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
        </li>
        <li>
        <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
        </li>
        <li>
        <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
        </li>
        <li>
        <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
        </li>
        <li>
        <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
        </li>
        <li>
        <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
        </li>
    </ul>

    <br />

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />

</body>
</html>

下面是我用来完成这项工作的javascript函数:

<script type="text/javascript">

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

</script>

2 回复 | 直到 6 年前

1

0

ring bearer 14 年前

你的脚本使用

document.getElementById("placeholder");

以获取占位符元素引用。如果希望能够使用此函数,请确保设置了html元素的id属性。所以,无论您的占位符元素是什么(我猜它是底部的img标记)都可以设置id=“placeholder”属性。

既然你已经开始了,看看文件:

https://developer.mozilla.org/en/DOM/document.getElementByID

从您的问题来看,您似乎正在链接到javascript。确保你的位置正确

如果添加div和检查.js文件的位置没有帮助,可以尝试在“firefox”上打开页面,然后单击链接并查找脚本错误。如何做到这一点是: 从“工具”菜单中,选择“错误控制台”。

这会给你一些有用的信息,告诉你出了什么问题。如果你有错误,不知道是怎么回事,就把它贴在这里。

2

1

Mahesh Velaga 14 年前

你错过了 身份证件 属性 IMG 标签

<img id="placeholder" src="images/placeholder.jpg" title="Place Holder Image" />

顺便说一句,既然您要声明xhtml,请确保关闭标记。