<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>картинки</title>
<script type="text/javascript">
function setBigImage(foto) {
var b=document.getElementById("bigimg")
b.src = foto.src;
document.getElementById("TXT").innerHTML=foto.alt
}
</script>
</head>
<body>
<div>
<p style = 'text-align: center;'>
<img id = 'bigimg' src = 'animal.jpg' height = '230' alt = 'animal' />
<p style = 'text-align: center;' id='TXT'>animal</p>
</p>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border: 1px solid #e2e2e2;">
<tr>
<td style="border: 1px solid #e2e2e2;" align="center" class="sm12-center">
<img src = 'animal.jpg' width = '50' onclick = 'setBigImage(this)' alt = 'animal'/>
<br><strong>animal</strong>
</td>
<td style="border: 1px solid #e2e2e2;" align="center" class="sm12-center">
<img src = 'flower.jpg' width = '50' onclick = 'setBigImage(this)' alt = 'flower'/>
<br><strong>flower</strong>
</td>
<td style="border: 1px solid #e2e2e2;" align="center" class="sm12-center">
<img src = 'space.jpg' width = '50' onclick = 'setBigImage(this)' alt = 'space'/>
<br><strong>space</strong>
</td>
</tr>
</table>
</div>
</body>
</html>