javascript - create image element and randomly place within div in html5
Question
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>
2 answers
solution1
1 2016-02-04 15:11:06
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;
}
solution2
0 2016-02-04 11:26:17
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.