Как изменить размер изображения при наведении?

Для изменения размера изображения при наведении в 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()">

Теперь размер изображения будет возвращаться к исходному при уходе курсора.