Java Script простым языком

codepen.io/muhurov/pen/byvYRE

const displayNode = document.querySelector("#image"); // сохраняем ссылку на элемент, в который будет выводиться картинка
const defaultBackgroundImage = displayNode.style.backgroundImage; // сохраняем дефолтный background (чтобы вернуть на место, когда нужно)
const defaultText = displayNode.innerText; // сохраняем дефолтный текст (чтобы вернуть на место, когда нужно)

//функция обработки "захода мыши" на картинку
function upDate(previewPicNode){
// previewPicNode - ссылка на элемент img
displayNode.style.backgroundImage = `url(${previewPicNode.src})`; // меняем картинку
displayNode.innerText = previewPicNode.alt; // меняем текст
}

//функция обработки "выхода мыши" из картинки
function unDo(){
displayNode.style.backgroundImage = defaultBackgroundImage; // возвращаем назад background
displayNode.innerText = defaultText; //возвращаем назад текст
}

<img id="im" src="https://st2.depositphotos.com/2001755/5408/i/450/depositphotos_54081723-stock-photo-beautiful-nature-landscape.jpg" alt='АЛЬТЕРНАТИВНЫЙ ТЕКСТ'>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.style.width = '450px';
div.style.height = '450px';
div.style.backgroundColor = 'blue';
div.style.float = 'right'
im.onmouseover = function () {
div.style.backgroundImage = 'url(https://st2.depositphotos.com/2001755/5408/i/450/depositphotos_54081723-stock-photo-beautiful-nature-landscape.jpg)';
div.innerHTML = im.alt;
}
im.onmouseleave = function () {
div.style.backgroundImage = 'none'
div.innerHTML = '';
}
</script>

Полезно сперва делать миниатюрный вариант, чтобы на месте видеть результат. На вашей большой картинке задолбались бы каждый раз скроллить и смотреть, что получается))

https://jsfiddle.net/OPTlMUS/v29e08nw/ - объяснения записал там же.

addEventListener - добавляет событие на выбранный элемент и избавляет от записи событий в HTML... как-то попроще получается) И на самом деле, если эти функции больше нигде не будут использоваться, можно сразу записать в таком виде: https://jsfiddle.net/OPTlMUS/3Lzs6txa/ , прямо внутри события...

Привет, а почему бы это не сделать через css? допустим с помощью background?