<style>
  #myImg {width: 0px; height: 0px}
  #myDiv img {width: 10%; height: 10%}
</style>

<div id="myDiv">
  <img src="http://javascript.ru/forum/image.php?u=17648&dateline=1338577823">
  <img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
</div>
<img id="myImg" src="">

<script>
window.onload = function () {
  var myDiv = document.getElementById('myDiv');
  var myImg = document.getElementById('myImg');

  myDiv.onclick = function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    if (target.parentNode == myDiv) {
        myImg.style['width'] = '200px';
        myImg.style['height'] = '200px';
        myImg.src = target.src;
    }

  }

}
</script>

<img id="layout1"  src="" alt="" />
					<img class="imgsrc" src="/images/1.jpg" alt="" />
					<img class="imgsrc" src="/images/2.jpg" alt="" />
					<img class="imgsrc" src="/images/3.jpg" alt="" />
					<img class="imgsrc" src="/images/4.jpg" alt="" />
	

[JS]
<script>		
$('.imgsrc').click(function(){ //вешаем обработчик события клик на каждую картинку с классом .imgsrc
		x=$(this).attr('src');  //получаем ресурс текущей картинки (на которую нажмем)
		$('#layout1').attr('src',x); //меняем ресурс у элемента с  id="layout1"
		});
</script>
[/JS]