Оформление фотогалереи

[xpom]

Оформление фотогалереи

Смысл задуманного, в том, что бы на превью фотографии снизу в правом углу было наложено несколько картинок с изображением лупы и при нажатии на неё открывалась уже большая фотография, в отдельном окне (ну это уже впрочем, не относится к картинкам и слоям). Картинок задумываю сделать 2 штуки - для просмотра картинки в среднем и высоком качестве.

—————

|             |

|             |

|             |

|             |

|       —-- |

|       | 1| 2|

—————

при нажатии на 1 - фотка в сверхвысоком разрешении,

при нажатии на 2 в высоком (к примеру).

И ещё вопрос: стоит ли так делать?

Фотогалерею делаю примерно как в ucoz, т.е. посередине превью в среднем разрешении, а снизу полоска из превью низкого разрешения. Влево-вправо при помощи AJAX маленькие картинки будут двигаться, а при нажатии на маленькое превью, посередине будет появляется превью в среднем разрешении (тоже при помощи AJAX). Так вот, стоит ли под превью среднего размера подкладывать превью в низком разрешении, т.е. пока будет грузится среднее разрешение превью, будет показываться превью в низком разрешении, но растянутое до размеров среднего. Доступно объяснил?

[xpom]

Судя по осутствию ответов, я все же плохо объяснил, что мне нужно. Приведу несколько примеров и то, что мне в них не нравится.

Пример первый - самодельный. Рамка от первого DIVa почему-то по высоте больше на размер второго DIVa.

<div style="width: 150px; height: 150px; float: left; border: 1px solid #008000" id="layer3">

<img border="0" src="kartinka.jpg" width="150" height="150">

<div style="position: relative; width: 40px; height: 40px; z-index: 5; top: -50; left: 50; border: 1px solid #007070" id="layer4">
2картинка</div>

</div>

Пример второй, подсказанный на другом форуме... тоже далеко от идеала.

<div style="width: 150px; height: 150px; float: left; border: 1px solid #008000; z-index: 4; " id="layer3">
<img border="0" src="kartinka.jpg" width="150" height="150">
</div>

<div style="position: relative; width: 40px; height: 40px; z-index: 5; top: 100; left: -100; border: 1px solid #007070" id="layer4">
2карти</div>



<div style="width: 150px; height: 150px; float: left; border: 1px solid #008000; z-index: 4; " id="layer3">
<img border="0" src="kartinka.jpg" width="150" height="150">
</div>

<div style="position: relative; width: 40px; height: 40px; z-index: 5; top: 100; left: -100; border: 1px solid #007070" id="layer4">
2карти</div>

[Vlad]

Вопрос больше теоретический - стоит ли так делать или практический - как мне это сделать?