Change image source on click on same page

Hello Guys,

I would appreciate if someone could help me with this. I am not sure if this is PHP or perhaps Javascript or JQUERY but I hope someone of you gurus would know.

I have created two pages (showclassified.php) and (showdetails.php). When a thumbnail link is clicked on the showclassified.php, images are populated in a table in the showdetails.php. The table shows five thumbnails photo1small, photo2small, photo3small, photo4small and photo5small all lined up in one column on the left. The next column shows a bigger image of photo1small (that is photo1big). The thumbnails and large images are all saved on a database. I would like the bigger image (photo1big) on the right to change to a bigger image of any other thumbnail when other thumbnails are clicked.

I tried creating four other pages (page1.php, page2.php, page3.php and page4.php) to link different thumbnails and their big images but, I would prefer to be able to change the images without loading different pages. Any help? Below is code showing my two different files.

Thank you.

showclassified.php


<?php
session_start();
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("blog") or die(mysql_error());

$sql = mysql_query("SELECT * FROM classified");
while($row = mysql_fetch_array($sql)){
	echo "<table border = '1'>";
	echo "<tr>";
	$id = $row['id'];
	echo "<td rowspan='3'><a href='showdetails.php?id={$id}'><img src='{$row['photo1small']}'/></a></td>";
	echo "<td width = '300'>". $row['title'] . "</td>";
	echo "<td width = '100'>". $row['price'] . "</td>";
	echo "</tr>";
	echo "</table>";
	echo "<br/>";
}
?>

showdetails.php


<?php
session_start();
$id = $_GET['id'];

mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("blog") or die(mysql_error());

$sql = mysql_query("SELECT * FROM classified WHERE id = '$id'");
while($row = mysql_fetch_array($sql)){
	echo "<table border = '1'>";
	echo "<tr><td><a href = 'showdetails.php'><img src='{$row['photo1small']}' width = '80' height = '55' /></a></td><td rowspan = '5'><img src = '{$row['photo1big']}'/></td></tr>";
	echo "<tr><td><a href = 'page1.php'><img src='{$row['photo2small']}' width = '80' height = '55' /></a></td></tr>";
	echo "<tr><td><a href = 'page2.php'><img src='{$row['photo3small']}' width = '80' height = '55' /></a></td></tr>";
	echo "<tr><td><a href = 'page3.php'><img src='{$row['photo4small']}' width = '80' height = '55' /></a></td></tr>";
	echo "<tr><td><a href = 'page4.php'><img src='{$row['photo5small']}' width = '80' height = '55'/></a></td></tr>";
	
	echo "</table>";
}

?>

Javascript, html and css.

Create 5 divs with the five large images.
CSS:

.show {
   display: block;
}
.hide {
   display: none;
}
<div id="image1" class="show" onClick="hide('image1')"> image </div>
<div id="image2" class="hide" onClick="hide('image2')"> image </div>
<div id="image3" class="hide" onClick="hide('image3')"> image </div>
<div id="image4" class="hide" onClick="hide('image4')"> image </div>
<div id="image5" class="hide" onClick="hide('image5')"> image </div>

'onClick" have Javascript change the class attributes as needed.