Форум

Dmitriy154 · #1 (**permalink**) 15.01.2017, 19:53

Подскажите, как добавить картинку или видео в div по клику?

ksa · #2 (**permalink**) 16.01.2017, 08:31

Сообщение от Dmitriy154

как добавить картинку или видео в div по клику?

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

Dmitriy154 · #3 (**permalink**) 16.01.2017, 10:24

подскажите код создания картинки в div id="box"
я пытаюсь сделать так:

var img1 = document.createElement('img src=xxx');
box.appendChild(img1)

ksa · #4 (**permalink**) 16.01.2017, 10:30

Сообщение от Dmitriy154

я пытаюсь сделать так:

var img1 = document.createElement('img src=xxx');
box.appendChild(img1)

Примеры лучше делать полными. Так гораздо лучше видеть всю картину.
А по твоему огрызку не понятно много чего...

Например так

Сообщение от Dmitriy154

document.createElement('img src=xxx')

Элементы не делаются.

Как вариант...

var img1 = document.createElement('img');
img1.src='xxx';

Dmitriy154 · #5 (**permalink**) 16.01.2017, 10:51

хорошо, элемент создали, а правильно я его размещаю в div?

рони · #6 (**permalink**) 16.01.2017, 11:20

Dmitriy154,
https://learn.javascript.ru/modifying-document
https://learn.javascript.ru/introduction-browser-events

ksa · #7 (**permalink**) 16.01.2017, 11:35

Сообщение от Dmitriy154

а правильно я его размещаю в div?

Так ты сделай полный тестовый пример, выкладывай его тут - на нем и посмотрим чего у тебя и как.

Dmitriy154 · #8 (**permalink**) 16.01.2017, 13:15

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
	  #box {
	  display: block;
	  background-image: url(http://kalamb.ru/fon.jpg);
	  margin: 0 auto;
	  width: 200px;
	  height: 200px;
	  transition: all;
	}	
  </style>
 </head>
 <body>
	<div id="box"></div>
 <!-- Первый вариант -->
	<script>
		box.onclick = function() {
		this.style.backgroundImage = url(http://kalamb.ru/1.jpg);
		alert ("rrr");
		}
	</script>
 <!--1-->
 
 <!-- Второй вариант
	<script>
		box.onclick = function() {
			var img1 = document.createElement('img');
			img1.src='http://kalamb.ru/1.jpg';
			box.appendChild(img1);
		}
	</script>
-->
 
 </body>
</html>

И ничего не работает. Смысл в чем, при клике на div с фоновым рисунком появляется нужная картинка или(!) встраивается видео <video>. Тяжелова-то самому сразу разобраться с JS. Прошу помощи!

ksa · #9 (**permalink**) 16.01.2017, 13:27

Сообщение от Dmitriy154

И ничего не работает.

Так нужно тестировать свой код.

По первому варианту...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#box {
	display: block;
	background-image: url('http://kalamb.ru/fon.jpg');
	margin: 0 auto;
	width: 200px;
	height: 200px;
	transition: all;
}	
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="box"></div>
<!-- Первый вариант -->
<script>
document.getElementById('box').onclick = function() {
	this.style.backgroundImage = 'url("http://kalamb.ru/1.jpg")';
};
</script>
</body>
</html>

ksa · #10 (**permalink**) 16.01.2017, 13:30

По второму варианту...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#box {
	display: block;
	background-image: url('http://kalamb.ru/fon.jpg');
	margin: 0 auto;
	width: 200px;
	height: 200px;
	transition: all;
}	
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="box"></div>
<!-- Второй вариант -->
<script>
var o=document.getElementById('box')
o.onclick = function() {
	var img1 = document.createElement('img');
	img1.src='http://kalamb.ru/1.jpg';
	this.appendChild(img1);
}
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript