单击时使用Javascript加载图像

Question

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

我找到了一个使用此方法的网站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>

ERROR：

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(){
...
});

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