Здравствуйте! Подскажите, пожалуйста, как лучше сделать.
На странице есть несколько отдельных блоков, в каждом из них несколько картинок-превью, при нажатии на которые отображаются большие картинки без перезагрузки страницы. Т.е. в каждом блоке меняются большие картинки при нажатии на превью. Для одного блока я использовала вот такую конструкцию:
<script language='javascript'> function show(path)
{ if (obj = document.getElementById('pic'))
{obj.src = path; }
}
</script>
<img id="pic" src = "images/big_1.jpg">
<a href="#f" onClick="show('images/big_1.jpg'); return false;"><img src="images/small_1.jpg"></a>
<a href="#f" onClick="show('images/big_2.jpg'); return false;"><img src="images/small_2.jpg"></a>
Как сделать, чтобы все работало для нескольких блоков?
<img id="pic2" src = "images/big_3.jpg">
<a href="#vf" onClick="show('images/big_3.jpg'); return false;"><img src="images/small_3.jpg"></a>
<a href="#vf" onClick="show('images/big_4.jpg'); return false;"><img src="images/small_4.jpg"></a>
и т.д.