Нажмите на изображение, чтобы его изменить, с эффектом зависания. HTML

Question

Когда я нажимаю свое изображение, оно изменяется (я удалял onmouseover для проверки), но когда я его вытаскиваю, он возвращается. Как сделать так, чтобы у моего изображения был эффект опрокидывания, а также остается, как только одно нажатие на новое изображение?

<img src="images/Character/NotSelected_Mage.png" alt="image" 
onclick="this.src='images/Character/Selected_Mage.png'"/ 
onmouseover="this.src='images/Character/Selected_Mage.png';" 
onmouseout="this.src='images/Character/NotSelected_Mage.png';"> 

Я новичок так что я только с помощью HTML, если я должен использовать CSS или Javascript или JQuery (будет означать, что пользователи должны установить JavaScript для просмотра моего сайта?) Я должен что-нибудь в моем коде, чтобы сказать, что я вдруг использую что-то другое, кроме html?

Answer 1

попробуйте изменить строку:

onclick="this.src='images/Character/Selected_Mage.png'"

To:

onclick="this.src='images/Character/Selected_Mage.png'; this.onmouseover = false; this.onmouseout = false;"

Answer 2

современных браузеров по умолчанию, следует запустить HTML и JavaScript просто отлично, не нужно ничего to'install , Не нужно «сообщать» пользователям, что вы используете/выполняете.