Как сделать в javascript увеличение картинок

В этой статье подробно описывается как в JavaScript реализовать увеличение картинок при наведении мышкой. Включает в себя примеры кода и подробное разъяснение как использовать свойство CSS transform.

Для увеличения картинки в JavaScript можно использовать событие onclick и функцию zoom(). Функция zoom() будет принимать один аргумент, имя тега img, и будет увеличивать картинку на 20% каждый раз, когда пользователь кликнет на нее.

Исходный код

// увеличивает картинку на 20% при клике
function zoom(img) {
  img.style.width = (img.width * 1.2) + "px";
}

Теперь нам нужно повесить функцию zoom() на тег img с помощью события onclick. Мы можем использовать для этого HTML атрибут onclick.

<img src="image.jpg" onclick="zoom(this)" />

Теперь, когда пользователь кликнет на картинку, функция zoom() будет вызвана и картинка будет увеличиваться каждый раз на 20%.