Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Динамическое создание img (https://javascript.ru/forum/misc/32488-dinamicheskoe-sozdanie-img.html)

garynich 18.10.2012 00:54

Динамическое создание img
 
Всем доброй ночи!

Задача: разработать скрипт, чья цель добавить img в место клика на другом img.

Есть скрипт:
function create_img (x,y) 
	{
	var n=Math.round(Math.random() * 9)+1
	var new_img=document.createElement('div');
	document.getElementById('marks').innerHTML="<div id='kol' style='position:absolute; top:"+y+"; left:"+x+";'><img name='kol'  src='car.png' height:46; width:43 ></div>";
	}


Данный скрипт работает, но при повторном клике предыдущая картинка просто стирается и пересоздается новая. Как можно решить данную проблему??

Заранее спасибо.

lord2kim 18.10.2012 08:41

garynich,
<html>
<head>
<script>
window.onload = function () {
	document.getElementById("img").onclick = function (e) {
		var e = e || window.event;
		var x = e.clientX || e.pageX, y = e.clientY || e.pageY;
		var div=document.createElement('div');
        div.className='myblock';
		div.style.position='absolute';
        div.style.top=y-2+'px';
        div.style.left=x+'px';
		div.innerHTML = "<img name='kol' src='car.png' style='height:46; width:43;'>";
        this.parentNode.parentNode.appendChild(div);
	}
}
</script>
</head>
<body>
<div id="div">
<img src="4R6MeH3N98k.jpg" id="img" style="width: 425px; height: 237px;">
</div>
</body>
</html>

garynich 23.10.2012 01:15

Спасибо большое. Все работает просто отлично.

Не могли бы вы еще ответить на один вопрос: как перемещать созданные таким методом изображения. Использую такой код, но ничего не работает:
var p = document.getElementById("car");
var r = obj.getBoundingClientRect();
p.style.top=r.top+40;
setInterval(function; 10000);


Все это дело оформлено в функции и должно вызываться вызывается при создании img.

Заранее спасибо за ответ.


Часовой пояс GMT +3, время: 11:37.