Load image with Javascript when clicked

Question

enter image description here

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

Can you provide a real page example? I tried your code in jsFiddle and it works. — Samuel Hapak
– Samuel Hapak, Commented May 6, 2012 at 21:46
@SamuelHapak: That is the only page I have right now, but it isn't working for me on Google Chrome or Firefox — JasonDavis
– JasonDavis, Commented May 6, 2012 at 21:53

Okan Kocyigit · Accepted Answer · 2012-05-06 22:25:54Z

2

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>

answered May 6, 2012 at 22:25

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JasonDavis Over a year ago

great thanks, I want to eventually change it to use something like date-image with the path to the image but I wanted to get this working first

bluish · Accepted Answer · 2012-05-07 08:07:31Z

1

Try to wrap in

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

If you have jQuery:

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

Or move the script to the bottom of the page.

edited May 7, 2012 at 8:07

bluish

27.6k28 gold badges126 silver badges185 bronze badges

answered May 6, 2012 at 21:42

Andrey M.

112 bronze badges

Collectives™ on Stack Overflow

Load image with Javascript when clicked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related