Нужно идентифицировать тег Img по координатам

Question

Мне нужно изменить цвет любого изображения, содержащего определенную координату x. Тем не менее, код, который я использую сейчас, дает мне контейнер #scrollwrapper, а не отдельное изображение, находящееся в этом месте.

var xHome = window.innerWidth/2; 
     var yHome = window.innerHeight/2; 
     var pElement = document.elementFromPoint(xHome, yHome); 
     alert (pElement.className); 

Это изображение контейнера-контейнера на изображениях, но не определенное изображение, которое есть. Сайт is coolaidhouse.com/projectcaptured

Вы можете увидеть скроллер. Я хочу затушить изображения на стороне «активного» элемента, который в основном является изображением, наиболее близким к середине.

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

Вот что конечный результат должен выглядеть следующим образом:

Answer 1

Ответ был комментарий Рик Хичкока. Однако не знаю, как отмечать комментарий как ответ. Изображения на самом деле еще не загружены.

Answer 2

Ваш код захватывает изображение при запуске с консоли. Поэтому вам нужно дождаться загрузки изображения перед запуском кода.

Элементы IMG имеют событие onload, которое вы можете использовать для этой цели.