waszkiewicz...изображение должно быть по центру. Проще говоря нужен аналог представления каталога изображений Windows средствами HTML/CSS
Если я правильно понял , то задача элементарная.
Вот сходу простой пример папки с изображениями (таблицы используются для выравнивания по центру), только ссылки на реальные фотки вставьте туда
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Image Folder test</title>
<style>
* { margin:0; padding:0 }
.big td { text-align:center; width:420px; height:420px; border-collapse:collapse; }
.big img { max-width:400px; max-height:400px; }
.small td { cursor:pointer; border-collapse:separate; padding:5px; border-spacing:5px; border:solid 1px transparent; text-align:center; }
.small td:hover { border:solid 1px red; }
.small .sel { border:solid 1px red; }
.small img { max-width:100px; max-height:100px; }
</style>
<script>
var current;
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var i, a = document.querySelectorAll('.small td');
for (i=a.length-1; i>=0; i-=1) {
a[i].addEventListener('click', function(e) {
document.querySelector('#dest').innerHTML = this.innerHTML;
this.className='sel'; if (current) { current.className=''; } current=this;
}, false);
}
}
</script>
</head>
<body>
<table class="big">
<tbody>
<tr>
<td id="dest"></td>
</tr>
</tbody>
</table>
<table class="small">
<tbody>
<tr>
<td><img src="1.jpg" alt=""/></td>
<td><img src="2.jpg" alt=""/></td>
<td><img src="3.jpg" alt=""/></td>
<td><img src="4.jpg" alt=""/></td>
<td><img src="5.jpg" alt=""/></td>
<!-- ... -->
</tr>
</tbody>
</table>
</body>
</html>
