Member Avatar for bo0ga

Please explain to a complete noob and please help me in regular javascript not jquery. I want an image to be shown and when clicked another image to show up right underneath

  • 3 Contributors
  • 3 Replies
  • 1K Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by bo0ga
Member Avatar for JorgeM

Here is a sample code I just put together which should be easy to explain and for you to work with...

<html>
<head>
<title>My title</title>

<script type="text/javascript">
 function preview(arg1){
 document.getElementById("imgPreview").src= arg1 +".jpg"
}
</script>

</head>
<body>

<img id="imgPreview" height="128px" width="128px" alt="image preview" /><br/><br/>
<img id="img1" src="img1.jpg" height="32px" width="32px" alt="image1" onclick="preview('img1')"/>

</body>
</html>

Ok, as you can see, a typical html document. JavaScript code placed within the <head> element. Within the body, two image elements. The "preview" image above the "thumbnail" image element. In this example, I have only one image in the same directory called img1.jpg. You will also notice that the img1 image element has an "onclick" event. When a user clicks on the image, this event is triggered. The event calls a function called "preview" and sends "img1" as its parameter/argument.

When the function receives this parameter, it can use it within the function. When the function is executed, it looks for an element with an ID of "imgPreview" and updates the src (source) attribute. This is where you apply the argument that was passed. This function updates the source and therefore the picture is updated.

You can have many images on the page, each with an onclick event sending the name of the image file to the function.

Hope this helps...

Member Avatar for bo0ga

Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.