Отображение изображения по нажатию кнопки - PullRequest
Новая
       3

Отображение изображения по нажатию кнопки

0 голосов
/ 02 октября 2019

Используя HTML, создайте веб-страницу со следующими свойствами: Создайте две кнопки - Turnon и Turnoff. Используйте on.png и off.png, чтобы

a) Если пользователь нажимает кнопку включения, на веб-странице должно отображаться on.png (изображение лампочки включено).

b) Если пользователь нажимает кнопку выключения, на веб-странице должно отображаться off.png (изображение с выключенной лампочкой) 

<!DOCTYPE html>
<html>
<head> 
    <title>Lightbulb</title>  
</head>

<body>

    <div style="text-align: center">

        <input type="button" value="turnon"
               onclick= showimage(img src="on.png") >

        <input type="button" value="turnoff"
               onclick= showimage(img src="off.png")>


    </div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 02 октября 2019

Пример работы в реальном времени

На самом деле вам нужно прочитать, используя функции JavaScript

Функции JavaScript => https://www.w3schools.com/js/js_functions.asp Установитьисточник изображения => https://www.w3schools.com/jsref/prop_img_src.asp

Вот вспомогательная ссылка, которую вы можете найти в Google https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

1 голос
/ 02 октября 2019 

function showImage() {
  document.getElementById('loadingImage').style.display = 'block';
}

function hideImage() {
  document.getElementById('loadingImage').style.display = 'none';
}
<input type="button" value="TURN ON" onclick="showImage();" />
<input type="button" value="TURN OFF" onclick="hideImage();" />
<img id="loadingImage" src="https://i.stack.imgur.com/WQB7V.jpg?s=48&g=1" style="display:none" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...