Tutorial :Changing picture caption with onclick



Question:

I have a thumbnail image that when you click it changes a larger image on the page. So far I have the Javascript figured out for passing on the .src, .alt, and .title information that makes the picture and tool tip of the picture change.

The large picture has a caption underneath. I was wondering how to also have the caption change when the thumbnail is clicked. I'm assuming I can change it into some sort of Javascript variable but this is my first time using JS so I am still very green.


Solution:1

One way is to have the caption in a container with an ID, and overwrite the innerHTML of that container. i.e.

<div id="myCaption">People of Walmart</div>    <script type=text/javascript>  document.getElementById('myCaption').innerHTML = 'Whoa!';  </script>  


Solution:2

If your caption has an ID you can select that caption and add the text through JS:

document.getElementById('id_of_the_caption').innerHTML = "Text to display";  

Use that JS code in your function that changes the image.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »