События onmouseover и onmouseout

Ниже расположены 4 фото кружек с животными. Наведите на каждое из изображений - и рядом возникнет увеличенная версия картинки.

Обратите внимание на то, что при уведении мыши с изображения на пустое пространство между картинками или за пределами блока, увеличенное изображение пропадает с экрана.

Cup with cat Cup with cat Cup with cat Cup with sheep

Код примера вы найдете на сайте html-plus.in.ua.

В JS коде используется прием делегирования событий, когда функция-обработчик события записывается для родительского элемента, но само событие обрабатывается для вложенных, или дочерних, элементов.

Родительский элемент для маленьких изображений имеет id="picContainer", а div, в котором мы видим увеличенное изображение - id="picHolder"

Изображения оптимизированы с помощью сайта tinypng.com