I want to clone an image and change the position of the cloned copy. I am cloning with the following script that follows an image defined in the document:
window.onload = function () {
var div = document.getElementById('autumn1');
var img = new Image();
img.src = 'autumn-leaves-hd-png--3101.png';
div.appendChild(img);
img.height = window.innerHeight / 6;
img.width = window.innerWidth / 6;
function cloneImg() {
div.appendChild(img.cloneNode(true));
}
for (let index = 0; index < 4; index++) {
cloneImg();
img.forEach(img.X = Math.random());
}
}
How can I introduce changing of position of the cloned image, in the script above?
You can return the image element in the function.
Please see snippet below :
window.onload = function () {
var div = document.getElementById('autumn1');
var img = new Image();
img.src = 'https://www.gravatar.com/avatar/bef07ce752c0e44449f4ec791d752871?s=48&d=identicon&r=PG&f=1';
div.appendChild(img);
img.height = window.innerHeight / 6;
img.width = window.innerWidth / 6;
function cloneImg() {
return div.appendChild(img.cloneNode(true));
}
for (let index = 0; index < 4; index++) {
let clone = cloneImg();
let random = Math.random()*75;
clone.style.position = 'absolute'
clone.style.left = random + "%";
}
}<div id="autumn1"></div>