Menu
First, my coding experience consists of modifying simple scripts to work on my pages. Second, I have searched and found several similar questions, but can't quite work my way through them.
I need some assistance with populating a 3x3 table with random images from an array of approximately 40 images. I currently have a working template that makes use of the backgroundImage property. I would like to change it to use regular images instead of background images so I can eventually add modal images.
I assume that this line of code is what needs to changed
cell1.style.backgroundImage = "url("+images[imagePos]+")";
I've tried several options I've found here and elsewhere. These two links seem the most relevent, but I can't quite seem to pull them together.
Randomly inserting images into table using Javascript
show random image from array in javascript
Any assistance or if there is a better solution that I can be directed to will be greatly appreciated.
<html>
<head>
<title>Random BG Table</title>
<style>
.cell {
background-position: center;
}
</style>
<script>
var images = new Array();
images.push("images/Image_01.jpg");
images.push("images/Image_02.jpg");
images.push("images/Image_03.jpg");
images.push("images/Image_04.jpg");
images.push("images/Image_05.jpg");
images.push("images/Image_06.jpg");
images.push("images/Image_08.jpg");
images.push("images/Image_09.jpg");
function randomCellBG()
{
var cell1 = document.getElementById("cell1");
var imagePos = Math.round(Math.random()*(images.length-1));
cell1.style.backgroundImage = "url("+images[imagePos]+")";
var cell2 = document.getElementById("cell2");
var imagePos = Math.round(Math.random()*(images.length-1));
cell2.style.backgroundImage = "url("+images[imagePos]+")";
var cell3 = document.getElementById("cell3");
var imagePos = Math.round(Math.random()*(images.length-1));
cell3.style.backgroundImage = "url("+images[imagePos]+")";
var cell4 = document.getElementById("cell4");
var imagePos = Math.round(Math.random()*(images.length-1));
cell4.style.backgroundImage = "url("+images[imagePos]+")";
cell5.style.backgroundColor = "gray"
}
</script>
</head>
<body onLoad="randomCellBG()"><br><br><br>
<table width="600" height="600" border="1" id="mainTable">
<tr>
<td width="200" class="cell" id="cell1"> </td>
<td width="200" class="cell" id="cell2"> </td>
<td width="200" class="cell" id="cell3"> </td>
</tr>
<tr>
<td width="200" class="cell" id="cell4"> </td>
<td width="200" id="cell5">title</td>
</tr>
</table>
</body>
</html>
506
asked Dec 14 '25 23:12
Use the innerHTML property
function randomCellBG()
{
var cell1 = document.getElementById("cell1");
var imagePos = Math.round(Math.random()*(images.length-1));
cell1.innerHTML = "<img src='"+images[imagePos]+"' />";
var cell2 = document.getElementById("cell2");
var imagePos = Math.round(Math.random()*(images.length-1));
cell1.innerHTML = "<img src='"+images[imagePos]+"' />";
var cell3 = document.getElementById("cell3");
var imagePos = Math.round(Math.random()*(images.length-1));
cell1.innerHTML = "<img src='"+images[imagePos]+"' />";
var cell4 = document.getElementById("cell4");
var imagePos = Math.round(Math.random()*(images.length-1));
cell1.innerHTML = "<img src='"+images[imagePos]+"' />";
cell5.style.backgroundColor = "gray";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
