ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
Готовые JavaScript скрипты для сайтов. W3Schools на русском

Увеличение изображения при клике


Увеличение изображения при клике с помощью JavaScript

С помощью данного скрипта можно создать эффект увеличения изображения при клике на нём, без перехода на отдельную страницу.

Для создания такого эффекта необходимо вставить следующий код:

Пример JavaScript-кода:

<script>
var bigsize = "300"; // Размер большой картинки
var smallsize = "150"; // Размер маленькой картинки
function changeSizeImage(im) {
if(im.height == bigsize) im.height = smallsize;
else im.height = bigsize;
}
</script>

Пример HTML-кода:

<div style="float:left;">
<img src="img01.jpg" height="150" onclick="changeSizeImage(this)" alt="" /> 
<p><b>Фото 1</b></p>
</div>
<img src="img02.jpg" height="150" onclick="changeSizeImage(this)" alt="" />
<p><b>Фото 2</b></p>

Скопируйте данный код и вставьте в нужном месте на веб-странице между тегами <body> и </body>.


Результат работы скрипта

 

Фото 1

Фото 2

Кликните на изображении мышкой, чтобы увидеть эффект.