Описание: Не так давно я выложил на сайт скрипт, открывающий изображения в новом окне . Однако, иногда бывает нужно, чтобы изображение не открывалось в новом окне, а просто подставлялось в определённую область, где оно будет выводиться в большом размере. Именно такой скрипт галереи на JavaScript я и представляю Ваше...
Описание: Не так давно я выложил на сайт скрипт, открывающий изображения в новом окне. Однако, иногда бывает нужно, чтобы изображение не открывалось в новом окне, а просто подставлялось в определённую область, где оно будет выводиться в большом размере. Именно такой скрипт галереи на JavaScript я и представляю Вашему вниманию сегодня.
Результат:
|
|
|
|
|
|
|
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
function setBigImage(foto) {
document.getElementById("bigimg").src = foto.src;
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<div>
<p style = 'text-align: center;'>
<img id = 'bigimg' src = 'gallery1.jpg' height = '150' alt = 'Главное изображение' />
</p>
<table style = 'margin: 0 auto;' border = '1'>
<tr>
<td>
<img src = 'gallery1.jpg' width = '100' alt = 'Изображение 1' />
</td>
<td>
<img src = 'gallery2.jpg' width = '100' alt = 'Изображение 2' />
</td>
<td>
<img src = 'gallery3.jpg' width = '100' alt = 'Изображение 3' />
</td>
</tr>
<tr>
<td>
<img src = 'gallery4.jpg' width = '100' alt = 'Изображение 4' />
</td>
<td>
<img src = 'gallery5.jpg' width = '100' alt = 'Изображение 5' />
</td>
<td>
<img src = 'gallery6.jpg' width = '100' alt = 'Изображение 6' />
</td>
</tr>
</table>
</div>
