Как изменить изображение кнопки при нажатии в HTML - PullRequest
Новая
       0

Как изменить изображение кнопки при нажатии в HTML

2 голосов
/ 20 июня 2020

Я новичок в HTML и JavaScript и хочу создать 5 кнопок для движения вперед, назад, влево, вправо и остановки. Я сделал это успешно, но хочу изменить изображение кнопки при нажатии. Я попытался использовать какую-то функцию, например clickon(), и присвоить кнопке id, но всегда видел это сообщение:

JavaScript: отсутствует точка с запятой.

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

Не могли бы вы посоветовать мне, как применить изменение изображения для одной кнопки, скажем, для передней? Тогда я смогу адаптировать его и для других.

Это код: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> UI buttons for controlling the robot </title>
        
        <style>
            div {
                
                margin: 250px 700px; <!-- to have the buttons in the middle -->
            }
            
        </style>
        
    </head>
    <body>
        
       <div>
       <table>
        <tr>
            <td> </td>
           
         <form>
             <td> 
            <input name="Forward" type = "image" src= "Forward.png" alt="Forward" hegiht="100" width="150" >
            </td>
             
         </form>
           
        </tr>
        <tr>
            <form>
            <td>
                 <input Name="Left" type = "image" src= "Left.png" alt="Left" hegiht="100" width="150"
            </td>
           <td>
            
               <input Name="Stop" type = "image" src= "Stop.png" alt="STOP!" hegiht="100" width="150" >
               
           </td>
           <td>
                 <input Name="Right" type = "image" src= "Right.png" alt="Right" hegiht="100" width="150"
            </td>
           
             
            </form>
            
        </tr>
        <tr>
            <td></td>
            <form>
            <td>
                  <input Name="Backwards" type = "image" src= "Backward.png" alt="backwards!" hegiht="100" width="150" >
            </td>
             </form>
        </tr>
                     
       </table>
            </div>
            
    </body>
   
</html>

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Вы можете использовать css button: active {backgroun-image: url ();} свойство

0 голосов
/ 20 июня 2020

Я взял только ввод с помощью name «Вперед» и попытался изменить изображение с помощью JavaScript, изменив атрибуты src и alt при нажатии. В этом атрибуте src обновлено изображение "MovingForwad.png", , а текст атрибута alt обновлен на "MovingForwad" . То же самое и с другими изображениями. 

document.querySelector('[name="Forward"]').addEventListener('click', changeImage);

function changeImage() {
  document.querySelector('[name="Forward"]').setAttribute('src', 'MovingForward.png');
  document.querySelector('[name="Forward"]').setAttribute('alt', 'Moving Forward');
}
<input name="Forward" type="image" src="Forward.png" alt="Forward" hegiht="100" width="150">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...