Форум

Григорий Данилович · #1 (**permalink**) 28.05.2015, 18:37

Здравствуйте,

Я пытаюсь подцепить одну и ту же картинку к разным областям так:

<style>
span { padding:10; margin:10; display:inline-block;  border:1px dotted red;}
span img {position:absolute; left:0; top:0;}
</style>

<script>
window.onload = function () {
    var base_image = new Image();
    base_image.src = 'images/pic7.jpg';
    base_image.width=30;
    var spans = document.getElementsByTagName('span');
    for(var i=0; i<spans.length; i++){
	   alert(i+':'+spans[i].style.height);
	   spans[i].appendChild(base_image);
    }
}

</script>
</head><body>
<span></span>
<span></span>
<span></span>
<span></span>

но картинка появляется только в первой области...
Помогите, пожалуйста, разобраться. Возможно ли вообще такое? Или здесь есть баг? Я пробовал создавать каждый раз новую картинку в цикле - никакой разницы не получил.

Григорий Данилович · #2 (**permalink**) 28.05.2015, 18:57

Уже решил сам. )
position: absolute; ставит картинку в абсолютные координаты (0,0)
и картинку нужно создавать новую - в цикле. Иначе она открывается в одном "окне", затем во втором и удаляется в первом.
Спасибо, всем кто пытался помочь

рони · #3 (**permalink**) 28.05.2015, 19:26

Григорий Данилович,

spans[i].appendChild(base_image.cloneNode());

Григорий Данилович · #4 (**permalink**) 28.05.2015, 19:35

Спасибо. Это - быстрее, конечно и лучше.
И можно сразу второй вопрос?
Я хочу поместить несколько картинок внутри каждой области друг на друга (пока в картинках установлена альфа, но как изменять её динамически - это будет третья проблема

). Никакая position не выглядит для этого подходящей...
Я дажн пробовал помещать внутри картинку по умолчанию, но брать её координаты или размеры, что-то не выходит... ;(

рони · #5 (**permalink**) 28.05.2015, 19:40

Григорий Данилович,
непонял ничего

Григорий Данилович · #6 (**permalink**) 28.05.2015, 19:45

Рони, я хочу помещать одну картинку поверх другой.
Как сделать, чтобы внутри одной области было несколько картинок покрывающих друг друга?

Григорий Данилович · #7 (**permalink**) 28.05.2015, 19:47

как при position:absolut; top:0; left:0; только относительно не всего экрана, а родителя?

Григорий Данилович · #8 (**permalink**) 28.05.2015, 19:50

zIndex поможет?

Григорий Данилович · #9 (**permalink**) 28.05.2015, 20:04

<style>
span { padding:10; margin:10; display:inline-block;  border:1px dotted red;}
span img {position:static; left:0; top:0;}
</style>

<script>
window.onload = function () {

var spans = document.getElementsByTagName('span');
var imgs = ['images/pic1-40x40.png','images/pic5-40x40.png'];
for (var imi=0; imi<imgs.length; imi++)
	var base_image = new Image();
	base_image.src = imgs[imi];
	base_image.width=30; 
	for(var i=0; i<spans.length; i++){
		
     	var imar=spans[i].getElementsByTagName('img');

	if (imar.length>0){
		alert(imar[0].src+'--'+
		      imar[0].style.width+'@'+imar[0].style.top);
		base_image.style.top = imar[0].style.top;
		base_image.style.left = imar[0].style.left;
		base_image.style.width = imar[0].style.width;
	}	
	else {
		alert('no picture found!');
	}
	spans[i].appendChild(base_image.cloneNode());
    }
}
</script>
</head><body>
<span id=1><img src='images/pic9.jpg' width=30></img></span>
<span id=2><img src='images/pic8.jpg' width=40></img></span>
<span id=3><img src='images/pic7.jpg' width=50></img></span>

Помещает знак неудавшейся загрузки картинки рядом с базовой  - не поверх её

рони · #10 (**permalink**) 28.05.2015, 20:30

Григорий Данилович,
родителю position: relative; картинкам position:absolut;

Форум

Справочник

Discord чат

Курсы javascript