A free library of HTML, CSS, JS

Search This Blog

Thursday, 10 March 2016

A Larger Image OnClick With JavaScript With Thumbnails On Same Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
            function showImage(imgName) {
                var curImage = document.getElementById('currentImg');
                var thePath = 'images/';
                var theSource = thePath + imgName;
                curImage.src = theSource;
                curImage.alt = imgName;
                curImage.title = imgName;
<style type="text/css">
#mainContainer, #footerArea {
    clear: both;
    width: 700px;
    margin: 10px;
#leftNav {
    float: left;
    width: 150px;
    margin-right: 15px;
    border-right: 1px solid #000;
    text-align: center;
#rightDisplay {
    float: right;
    width: 530px;
    margin: 0;
    text-align: center;
img {
    margin: 10px 0 10px 0;
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
  Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->

  <div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
    <img src="images/bridget_moynahan_01_tn.jpg"  onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
    <img src="images/bridget_moynahan_02_tn.jpg"  onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
    <img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
    <img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
    <img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
  <div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>



  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai