javascript - 单击时使用 Javascript 加载图像

Question

我正在尝试做与上图类似的事情，我正在使用 Wordpress，我将使用 PHP 构建 HTML 输出，但是当单击缩略图时，我需要将更大的图像加载到大图像插槽中。

我在下面找到了一个使用此方法的网站 pof.com，但是当我尝试它时，我得到了下面的错误。请帮忙？

<script>
function B(strNewImage, caption) {
  document.images['MP'].src = strNewImage;
  document.getElementById("icaption").innerHTML = caption;
}
</script>

<img src="http://default_image.jpg" border="0" id="mp" name="MP">

<a href="javascript: B('image_2.jpg','test')"><img src="thumbnails/image_2.jpg" border="0"></a>
<a href="javascript: B('image_3.jpg','test')"><img src="thumbnails/image_3.jpg" border="0"></a>
<a href="javascript: B('image_4.jpg','test')"><img src="thumbnails/image_4.jpg" border="0"></a>
<a href="javascript: B('image_5.jpg','test')"><img src="thumbnails/image_5.jpg" border="0"></a>

错误：

Uncaught ReferenceError: B is not defined

Answer 1

您的代码正在运行，DEMO，这一切都与您定义B函数的位置有关。或者可能由于未定义类型的脚本标签而无法正常工作。

<script type="text/javascript">
function B(strNewImage, caption) {
  document.images['MP'].src = strNewImage;
  document.getElementById("icaption").innerHTML = caption;
}
</script>

Answer 2

尝试包裹

window.onload = function() {
...
}

如果你有 jQuery：

$(function(){
...
});

或者将脚本移动到页面底部。