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

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

  • автор:

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

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

Лучшие ответы ( 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

Эксперт JSЭксперт HTML/CSS

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

Эксперт JSЭксперт HTML/CSS

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>

Html появление картинки по нажатию кнопки

Интересует возможно-ли в рамках html(+ javascript, css, но без костылей на 50 строк кода) сделать при нажатии кнопки появление картинки? Просто я прямо новичок новичок в этом, если можно то хотя-бы с минимальным объяснением.

Лучший ответ

Можно. Достаточно сделать картинке стиль display: none, а при нажатии менять его на block. Вот пример:
https://jsfiddle.net/csytLgza/4/

Остальные ответы
Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

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

В папку с программой необходимо положить те картинки, которые будут в вашем списке.
Имена картинок должны соответствовать наименованию строки.
Если в списке «солнце», то картинку называем «солнце.jpg».

Add(MainForm,2953706,119,273)
Width=261
Height=326
Position=1
link(onCreate,2476299:doRandomize,[])
>
Add(Button,3272711,189,301)
Left=15
Top=10
Width=200
link(onClick,3980929:doEvent1,[])
>
Add(Image,6566424,609,210)
Left=15
Top=60
Width=200
Height=200
Color=16777215
ViewStyle=0
>
Add(Jpeg,9896000,560,210)
Quality=100
Point(doBitmap)
Point(FileName)
link(onBitmap,6566424:doLoad,[])
>
Add(Hub,7362224,525,210)
link(onEvent1,9896000:doLoad,[])
link(onEvent2,9896000:doBitmap,[(549,223)(549,230)])
>
Add(StrCat,14212699,476,210)
Str2=».jpg»
link(onStrCat,7362224:doEvent1,[])
>
Add(StrList,3164099,343,196)
Strings=#6:солнце|6:камень|8:карандаш|
Point(EndIdx)
Point(doGetString)
Point(onGetString)
link(onGetString,2150770:doEvent1,[])
>
Add(Random,2476299,364,280)
Point(doMax)
Point(Max)
link(onRandom,3164099:doGetString,[(408,286)(408,258)(331,258)(331,230)])
link(Max,3164099:EndIdx,[])
>
Add(Label,10911830,476,140)
Left=15
Top=35
Width=200
>
Add(Hub,2150770,413,203)
link(onEvent1,10911830:doText,[(445,209)(445,146)])
link(onEvent2,14212699:doStrCat,[])
>
Add(Hub,3980929,245,301)
link(onEvent1,2476299:doMax,[])
link(onEvent2,2476299:doRandom,[(311,314)(311,286)])
>

Редактировалось 2 раз(а), последний 2019-08-25 12:54:47

K0ndar

Ответов: 10
#3: 2019-08-25 14:05:34 ЛС | профиль | цитата

Не совсем понимаю что Вы подразумеваете под словами «В папку с программой необходимо положить те картинки, которые будут в вашем списке». Что за папка с программой?

Nic

Главный модератор
Ответов: 2997
Рейтинг: 395
#4: 2019-08-25 14:27:02 ЛС | профиль | цитата
K0ndar писал(а):
Не совсем понимаю

В начале было слово и слово было. размером восемь бит. Так могла бы начинаться книга новейшего завета для программистов.

Редактировалось 4 раз(а), последний 2019-08-25 14:32:32
Дорогу осилит идущий. Install/Update HiAsm.NET

K0ndar

Ответов: 10
#5: 2019-08-25 18:29:03 ЛС | профиль | цитата

Друзья, помогите, что делать дальше? Я не понял что за папка с программой. Куда мне нужно поместить мои фото? На схеме нужно еще что-то добавлять или только добавить фото в какую-то папку? Я ламер в hiasm, только недавно начал. Мне только узнать последний шаг. Буду очень благодарен если поможете понять эту схему (схема отправлена пользователем Master4eG выше). Просто реально не понимаю какую папку, в которую нужно кидать фотографии имеет ввиду Master4eG. Я уже почти доделал все, остался этот последний шаг.

kamakama

Ответов: 864
Рейтинг: 321
#6: 2019-08-25 19:09:54 ЛС | профиль | цитата
K0ndar, выложи свою схему, посмотрим на последний шаг.

K0ndar

Ответов: 10
#7: 2019-08-25 19:39:45 ЛС | профиль | цитата

— Добавлено в 2019-08-25 19:41:24

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

Редактировалось 3 раз(а), последний 2019-08-25 19:41:24

kamakama

Ответов: 864
Рейтинг: 321
#8: 2019-08-25 20:07:07 ЛС | профиль | цитата

K0ndar, читай справку к элементам и особенно, вдумчиво и не торопясь просмотри все примеры. Наверное будешь удивлен но в примерах есть почти все ответы на твои вопросы а после прочтения wiki (подчеркиваю — действительного ПРОЧТЕНИЯ wiki ) можно уже и самому отвечать на вопросы. Дерзай.

K0ndar

Ответов: 10
#9: 2019-08-25 20:10:39 ЛС | профиль | цитата

ладно, спасибо на этом, просто уже второй раз пишу очень много текста и случайно или сам удаляю или удаляется из-за бага и уже не хочется ничего писать. Я выше писал, что не могу скинуть схему, потому, что в imgbtn уже стояли картинки. Ладно, мне не к спеху делать мою прогу, почитаю еще, поучусь и сам допру наверное потом. Хотя хотелось бы чтоб мне кто-то объяснил что имел ввиду пользователь скинувший схему выше под словами «В папку с программой необходимо положить те картинки, которые будут в вашем списке».

3042

Ответов: 1921
Рейтинг: 172
#10: 2019-08-25 20:19:25 ЛС | профиль | цитата
K0ndar писал(а):
В папку с программой необходимо положить те картинки, которые будут в вашем списке

Что-то вроде этого:

Простите, а сколько вам лет?

K0ndar

Ответов: 10
#11: 2019-08-25 21:00:01 ЛС | профиль | цитата

Вау, 3042, вы просто гений (без сарказма с отрицательным подтекстом). Крч я слегка поехал, потому что я естественно сначала кинул все в папку, но картинку называл условно не «солнце», а «солнце.png», я думал именно это и имел ввиду тот кто скинул данную конструкцию. Поэтому ничего не работало. Огромное спасибо, что направили меня на истинный путь

— Добавлено в 2019-08-25 21:08:13

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

— Добавлено в 2019-08-25 21:40:00

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

Редактировалось 2 раз(а), последний 2019-08-25 21:40:00

Vadimluk1

Ответов: 632
#12: 2019-08-25 22:08:04 ЛС | профиль | цитата

K0ndar , вообще-то можно было все автоматизировать! Скомпилируете программу и рядом с программой положите все свои изображения (.jpg) формата.

Add(MainForm,3551160,49,217)
Width=261
Height=326
Position=1
link(onCreate,3226726:doSearch,[(128,237)(128,174)])
>
Add(Button,3272711,119,245)
Left=15
Top=10
Width=200
link(onClick,3980929:doEvent1,[])
>
Add(Image,6566424,539,154)
Left=15
Top=60
Width=200
Height=200
Color=16777215
ViewStyle=1
>
Add(Jpeg,9896000,490,154)
Quality=100
Point(doBitmap)
Point(FileName)
link(onBitmap,6566424:doLoad,[])
>
Add(Hub,7362224,455,154)
link(onEvent1,9896000:doLoad,[])
link(onEvent2,9896000:doBitmap,[(479,167)(479,174)])
>
Add(StrList,3164099,273,140)
Point(EndIdx)
Point(doGetString)
Point(onGetString)
link(onGetString,2150770:doEvent1,[])
>
Add(Random,2476299,294,224)
Point(doMax)
Point(Max)
link(onRandom,3164099:doGetString,[(338,230)(338,209)(261,209)(261,188)])
link(Max,3164099:EndIdx,[])
>
Add(Label,10911830,406,84)
Left=15
Top=35
Width=200
>
Add(Hub,2150770,343,147)
link(onEvent1,2941623:doPart,[(369,153)(369,121)(345,121)(345,90)])
link(onEvent2,7362224:doEvent1,[])
>
Add(Hub,3980929,175,245)
link(onEvent1,2476299:doMax,[])
link(onEvent2,2476299:doRandom,[(241,258)(241,230)])
>
Add(FileSearch,3226726,175,168)
Ext=»*.jpg»
Dir=»\»
link(onSearch,3164099:doAdd,[(240,174)(240,146)])
link(onEndSearch,2476299:doRandomize,[(251,181)(251,237)])
link(Dir,3898168:CurrentDir,[])
>
Add(Dir,3898168,182,63)
>
Add(FilePartElm,2941623,357,84)
Mode=2
link(onPart,10911830:doText,[])
>

ФорумыМежду делом Как сделать так, чтобы при нажатии на кнопку появлялась случайная картинка из? ← Ctrl 1 Ctrl →

Включить видео с youtube после нажатия на кнопку или элемент

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

Вариант 1 — Видео в одном блоке, картинка над видео, после нажатия на картинку видео включается, а картинка прячется

Этот вариант удобен тем, что можно в блок с видео загрузить любое видео, любой фрейм.

Код HTML

Есть общий контейнер, внутри видео и над ним картинка.

Код Javascript

После нажатия на картинку, изображение пропадает, а к видео-фрейму добавляется атрибут &autoplay=1 и запускается проигрывание видео.

jQuery(document).ready(function ($) < (function initPlayVideo() < var $videoCover = $(".f-video-cover"); var $videoPlayerIframe = $(".f-video-player iframe"); $videoCover.on("click", function () < $videoCover.fadeOut(); $videoPlayerIframe[0].src += "&autoplay=1"; >); >)(); >);

Код CSS

Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины

.f-video-container < position: relative; display: block; width: 560px; >.f-video-player < position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; >.f-video-player iframe, .f-video-player object, .f-video-player embed < position: absolute; left: 0; top: 0; height: 100%; width: 100%; >.f-video-cover

Рабочий пример запуска видео по клику — Нажмите на картинку

Вариант 2 — После нажатия на картинку видео вставляется в блок, а картинка пропадает.

Этот вариант лучше тем, что при загрузке страницы никакие скрипты с yotube не подгружаются, но код самого скрипта становится сложнее, и менее кастомизированным, более шаблонным.

Код HTML

Блок для видео пустой ,в него потом будет загружено видео. Обложка видео .f-video-cover расположена над контейнером для видео.

В коде добавлен дата-атрибут data-video для блока .f-video-cover — это нужно, чтобы шаблонизировать данный код, например, чтобы можно было выводить код видео с помощью какого-нибудь кастомного поля в шаблоне.

Код Javascript

После нажатия на картинку, она пропадает, а в контейнер для видео .f-video-player загружается видео-фрейм.

В скрипте уже прописана заготовка для видео с youtube, в которую только подставляется ID видео

jQuery(document).ready(function ($) < (function initPlayVideo() < var $videoCover = $(".f-video-cover"); var $videoPlayer = $(".f-video-player"); var $videoUrl = $(".f-video-cover").data("video"); $videoCover.on("click", function () < $videoCover.fadeOut(); $videoPlayer.html( '' ); >); >)(); >);

Код CSS

Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины

.f-video-container < position: relative; display: block; width: 560px; >.f-video-player < position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; >.f-video-player iframe, .f-video-player object, .f-video-player embed < position: absolute; left: 0; top: 0; height: 100%; width: 100%; >.f-video-cover

Рабочий пример запуска видео по клику — Нажмите на картинку

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

Если на странице должно быть несколько блоков с видео,

тогда нужно немного изменить скрипт, если у вас другая верстка, то подкорректировать этот скрипт под свою верстку, главное — понять логику

jQuery(document).ready(function ($) < (function initPlayVideo() < $(".f-video-cover").on("click", function () < $(this).fadeOut().siblings('.f-video-player').html( '' ); >); >)(); >);

В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…

Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…

Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…

Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets…

Похожие публикации:
  1. Cherry pick commit что это
  2. Как из строки сделать массив java
  3. Как переводится windows
  4. Как решать логические тесты с фигурами

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *