Для изменения размера изображения при наведении в JavaScript необходимо использовать события мыши и изменять значение CSS-свойств для элемента с помощью JavaScript.
Для начала, чтобы иметь возможность изменять свойства элемента с помощью JavaScript, необходимо присвоить элементу уникальный идентификатор (id). Например, если у нас есть изображение с идентификатором "myImage":
<img id="myImage" src="image.jpg">
Теперь давайте создадим функцию, которая будет вызываться при наведении курсора на изображение:
function enlargeImage() { var image = document.getElementById("myImage"); image.style.width = "200px"; image.style.height = "200px"; }
В данной функции мы получаем элемент изображения с помощью метода getElementById
и присваиваем значения CSS-свойств width
и height
для изменения размера изображения. В данном примере размер изображения будет увеличен до 200x200 пикселей.
Осталось только связать нашу функцию с событием onmouseover
, которое будет срабатывать при наведении курсора на изображение:
<img id="myImage" src="image.jpg" onmouseover="enlargeImage()">
Теперь при наведении курсора на изображение произойдет изменение его размера.
Если необходимо вернуть изображение к исходному размеру при уходе курсора, можно создать ещё одну функцию:
function resetImage() { var image = document.getElementById("myImage"); image.style.width = ""; image.style.height = ""; }
И добавить вызов этой функции при событии onmouseout
:
<img id="myImage" src="image.jpg" onmouseover="enlargeImage()" onmouseout="resetImage()">
Теперь размер изображения будет возвращаться к исходному при уходе курсора.