CODEWITHSUNDEEP
javascriptcsshtml
whada
whada

Reputation: 316

javascript - create image element and randomly place within div in html5

In my html document I have a div with id="containerRight". In the same directory where the html document is I have an image that needs to be added to the html. Using javascript I want to add 5x the same image into the div and scatter them randomly within the div. I'm struggling with adding 5x the same image from the hdd and positioning them randomly within the div. I have tried this so far:

<!DOCTYPE html>
<html>
<head>
<script>

function insert_picture(){
var newPicture = document.createElement("img");
var destinationParent = document.getElementByID("containerRight");
destinationParent.appendChild(newPicture);
}

function ImgRandomPosition()
{
    var left = generateRandom();
    var top = generateRandom();
var image = insert_picture();
var imagestyle = document.getElementById("imgRight").style;
imagestyle.position = "absolute";
imagestyle.top = top;
imagestyle.left = left;
}

</script>
</head>

<body onclick="insert_picture()">
<div id="containerRight">
<img id="imgRight" src="smiley.png" alt="" />
</div>

</body>
</html>

Upvotes: 1

Views: 4241

Answers (2)

whada
whada

Reputation: 316

I have changed the code to the following and it adds images to the div containerRight next to each other:

function insert()
{
    var imgDestination = document.getElementById("containerRight");
    var imgAdded = document.createElement("img");
    imgAdded.src = "smiley.png";
    imgDestination.appendChild(imgAdded);
}

Then the next issue is to position images randomly within the same div id="containerRight". The code below does add images randomly to the body of the html not the div. Any further thoughts greatly appreciated:

function insert()
{
    var imgDestination = document.getElementById("containerRight");
    var imgAdded = document.createElement("img");
    imgAdded.src = "smiley.png";
    imgDestination.appendChild(imgAdded);
    ImgRandomPosition(imgAdded);
}


function ImgRandomPosition(imgAdded)
{
    var left = Math.floor((Math.random() * 400) + 1)+"px";
    var top = Math.floor((Math.random() * 400) + 1)+"px";
    var imagestyle = imgAdded.style;
    imagestyle.position = "absolute";
    imagestyle.top = top;
    imagestyle.left = left;
}

Upvotes: 2

gurvinder372
gurvinder372

Reputation: 68393

change your code to

function insert_picture()
{
   var newPicture = document.createElement("img"); 
   var destinationParent = document.getElementByID("containerRight");
   destinationParent.appendChild(newPicture);
   newPicture.src = "smiley.png";
   ImgRandomPosition(newPicture);
}

function ImgRandomPosition(imgObj)
{
    var left = generateRandom();
    var top = generateRandom();
    var imagestyle = imgObj.style;
    imagestyle.position = "absolute";
    imagestyle.top = top;
    imagestyle.left = left;
}

Now when you click on the body <body onclick="insert_picture()"> this method will add an image somewhere on the body

Upvotes: 0

Related Questions