Для того, чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.


Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.

Ссылка на изображение №1
Ссылка на изображение №2
Ссылка на изображение №3
Ссылка на изображение №4
Пример смены изображения при клике по ссылке

Для получения такого эффекта "смены" изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:

JavaScript код:
<script type="text/javascript">
function 
l_image (a) {
 
document.example_img.src=a
}
</script>

В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:

HTML код:
<table border="0" cellspacing="0" cellpadding="0">
<
tr>
 <
td width="350" height="200" valign="center" align="center">
  <
a href="javascript:l_image ('image/img_1.png')">Ссылка на изображение №1</a><br>
  <
a href="javascript:l_image ('image/img_2.png')">Ссылка на изображение №2</a><br>
  <
a href="javascript:l_image ('image/img_3.png')">Ссылка на изображение №3</a><br>
  <
a href="javascript:l_image ('image/img_4.png')">Ссылка на изображение №4</a><br>
 </
td>
 <
td width="350" height="200" valign="center" align="center">
  <
img src="image/img_1.png" name="example_img"
  
alt="Картинки для демонстрации работы скрипта смены изображений">
 </
td>
</
tr>
</
table>

Данный пример поможет Вам избежать переизбытка изображений на одной странички сайта и улучшит общую читабельность.