Question

I am trying to do something similar to the image above, I am using WordPress and I will build the HTML output with PHP but I need to load a larger image into the Big image slot when a thumbnail image is clicked.

I found a site pof.com that uses this method below but when I try it I get the error below. Please help?

<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

your code is working, DEMO, it’s all about where you defined B function. Or maybe It’s not working beacuse of undefined type of script tag.

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