Как я могу изменить кнопки моего изображения при нажатии на другое изображение?

Question

Я создал четыре .PNG с Photoshop, чтобы действовать как кнопки. Два изображения являются кнопками по умолчанию, а два других - кнопки «после нажатия».Это кнопки по умолчанию, для которых я сделал отдельные идентификаторы:

    #PlayButton {
display: inline-block;
width:10%;
position: relative;
margin-left: auto;
margin-right: auto;

}


#AboutButton {
display: inline-block;
width:10%;
position: relative;
margin-left: auto;
margin-right: auto;
}

Я поместил их оба в класс "Кнопки"

<div class="Buttons">
<img src="Play Button.png" id="PlayButton">
<img src="About Button.png" id="AboutButton"> 
</div>

Answer 1

Вы можете использовать небольшой JavaScript для решения вашей проблемы.

Это код для первого изображения (до нажатия кнопки):

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

И это код для второго изображения (после нажатия кнопки):

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

Справка: JavaScript может изменять значения атрибутов HTML. Надеюсь, этот ответ поможет вам решить проблемы, с которыми вы столкнулись.