Изменение события OnMouseOut из JavaScript работает только на мгновение

Question

быстрый вопрос, я пытаюсь изменить источник изображения для события OnMouseOut из JavaScript

Изображение меняется очень хорошо, но работает, пока я не попытаюсь повторно ввести элемент, после чеготег, кажется, теряется ...

Вот код изображения / кнопки:

<img id="ImageBTN" src="image1_relative_path" onclick="Afunction()" onmouseover="src='image2_relative_path'" onmouseout="src='image1_relative_path'"/>

Подобное изображение / кнопка работает как брелок и переключается между изображениями 1 и 2 относительнонашему движению мыши.Теперь я хотел бы изменить изображение при нажатии на него таким образом, чтобы изображение 1 в основном заменялось изображением 3

Вот код JavaScript

function Afunction()
        {
            document.getElementById('ImageBTN').src = "image3_relative_path";
            document.getElementById('ImageBTN').onmouseout = "src='image3_relative_path'";
        }

Как я уже говорил выше,код работает, пока я не попытаюсь повторно ввести объект.Вот как это происходит:

• Страница загружается и отображается изображение 1
• Я наведите указатель мыши на изображение, и изображение изменится на Изображение 2
• Пооставив изображение Изображение 1 восстановлено
• Снова возвращаясь к объекту Изображение 2 показано
• При щелчке объекта (я полагаю, что смена SRC делает это) изображение меняется на Изображение 3
• Выход из объекта сохраняет изображение 3 (при условии, что это делает onmouseout)
• При повторном входе в объект, правильно, изображение 2
• Теперь, когда вы покинете объект или сделаетеотображается только изображение 2

Как будто теги src и onmouseout были удалены после использования (после того, как мышь покинула объект)

Я бы оченьценим некоторое понимание!

Спасибо!

Answer 1

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

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" 
     onclick="src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyD300.jpg'"
     onmouseout="src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg'" 
     onmouseover="src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg'" width="300" height="300"/>