Как сделать чтобы при нажатии на кнопку появлялась картинка html

Нужен простой скрипт (при нажатии на кнопку появлЯется картинка)

Присоединяюсь к данному вопросу — нужен такой скриптик.

24 октября 2010, 13:31

Можно с помошью анимации, а можно и с помощью curl, например я нажал на кнопку, скрипт поменял картинку и мне выдал другую с помошбью запросов curl

На сайте с 06.07.2010
24 октября 2010, 14:13

Могу написать на флеш.

Пишу PHP скрипты на заказ (дешево)
На сайте с 31.12.2007
24 октября 2010, 14:23

programm:
Можно с помошью анимации, а можно и с помощью curl, например я нажал на кнопку, скрипт поменял картинку и мне выдал другую с помошбью запросов curl

Анимация это вообще не то. Замена картинок это тоже не то. Нужно что бы поверх одной картинки накладывалась другая. У этой другой картинки есть прозрачная часть, через которую видно первую картинку.

Олег_Дорожко:
Могу написать на флеш.

Флеш не годится. Т.к. мне не конкретно стол нужен с чашками и т.д. Нужно будет иметь возможность менять/добавлять/удалять картинки.

Я просто не знаю на чем это делается — php, javascript и т.д. Но я на 100% уверен, что скрипт простой. Зачем все усложнять флешем и т.д.?

Как сделать так, чтобы при нажатии на кнопку, появлялись все картинки разом

У меня есть код, в котором картинки появляются последовательно, а мне надо чтобы все сразу появилось, не подскажите?

HTML>   Фото галерея  

JAVA Joski.js

var pics = new Array( '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', ); var cur = -1; function BgButton() < cur++; if (cur>4) cur=-1; document.getElementById('kartinka').src=pics[cur]; > 

Появление и исчезновение картинки при клике по кнопке на Javascript

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

Этот вопрос показался мне интересным по нескольким причинам. Во-первых – его задал человек, который совершенно не разбирается в программировании, а моя цель именно в том, чтобы помогать таким людям. Во-вторых, ответив на этот вопрос я могу одновременно раскрыть несколько тем по программированию на Javascript.

Алгоритм программы

Первое с чего нужно начинать создание любой программы – это продумать её алгоритм. То есть нужно расписать каждый шаг, который должна будет выполнить наша программа на пути к реализации поставленной задачи. А также, нужно составить алгоритм своих действий при написании программы.

Последовательность создания программы

1. Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
2. Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
3. Создать событие для кнопки onClick, которое будет вызывать нашу функцию.

Алгоритм работы программы

1. Нажатие на кнопку.
2. Вызов функции.
3. Если картинка в браузере не отображается, то показать её.
4. Если картинка видна в браузере, то спрятать её.

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

Исчезновение картинки при клике по кнопке

Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.

HTML

 Показать/Скрыть картинку

JS

function myImg()

В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style. С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).

Отображение картинки при нажатии на кнопку

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

HTML

 Показать/Скрыть картинку

JS

function myImg()

В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.

Появление и исчезновение картинки при нажатии кнопки

Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:

HTML

 Показать/Скрыть картинку

JS

function myImg() < let elem = document.getElementById('img_1'); // получаем элемент по ID let style = getComputedStyle(elem); // получаем его стили if (style.display === 'none') < document.getElementById('img_1').style.display='block'; >else if (style.display !== 'none') < document.getElementById('img_1').style.display='none'; >>

В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».

При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.

Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).

После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.

Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.

Обратите внимание на то, что втором условии мы выполнили проверку именно неравенства (указали НЕ равно none), хотя могли написать условие else if (style.display === ‘block’). Этот вариант тоже будет работать, но при условии что для отображения картинки мы всегда будем использовать display:block.

Как сделать чтобы при нажатии на кнопку добавлялась картинка

Здравствуйте!
Как сделать чтобы при нажатии на кнопку добавлялась картинка.

Лучшие ответы ( 1 )

Здесь вы можете заказать любую студенческую или школьную работу.

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями:

Как сделать,чтоб при нажатии на кнопку картинка менялась(на кнопке) ?)
C этой<img src="1092.png"> На эту<img src="7798.png">

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

Как сделать чтобы при нажатии на кнопку next активировался следующий radio (см. код)!?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN".

Как сделать чтобы при нажатии на кнопку менялась и кнопка, и определенное содержимое?
/—HTML—/ <div <h1>schreenshot</h1> <img.

dev — investigator

2151 / 1496 / 651

Регистрация: 16.04.2016

Сообщений: 3,696

JackPOlo,

button id="btn">Кнопка/button>

btn.onclick=function(){if(!document.getElementById('img')){var image=document.createElement('img');image.id="img";image.src="https://dummyimage.com/100x100/b8b8b8/000000.png";document.body.appendChild(image)}}

Регистрация: 17.03.2018

Сообщений: 8

Почему то не работает?

dev — investigator

2151 / 1496 / 651

Регистрация: 16.04.2016

Сообщений: 3,696

Сообщение было отмечено JackPOlo как решение

Решение

JackPOlo, код JS разместить перед закрывающим тегом

1 2 3 4 5 6 7 8 9 10 11 12 13 14

 html lang="ru"> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> head> body> button id="btn">Кнопкаbutton> script> btn.onclick=function(){if(!document.getElementById('img')){var image=document.createElement('img');image.id="img";image.src="https://dummyimage.com/100x100/b8b8b8/000000.png";document.body.appendChild(image)}} script> body> html>