Member Avatar for Magic8Computing

Hi,

I am trying to get a random image as a background to a cell, and have tried many ideas but none work, in desperate need for help can anybody please.

I have this in the header

<script language="javascript" type="text/javascript">
  
    var img_rnd = new Array ();
	
	img_rnd[0] = "hp-1.jpg";
	img_rnd[1] = "hp-2.jpg";
	img_rnd[2] = "hp-3.jpg";
	img_rnd[3] = "hp-4.jpg";
	img_rnd[4] = "hp-5.jpg";
	img_rnd[5] = "hp-6.jpg";
	
	var i = Math.floor(Math.random() * 6);
	
	document.getElementById("hp-random").style.backgroundImage="url("+img_rnd[i]+")";
	
	//-->
  </script>

and this on the cell

<td colspan="2" id="hp-random" height="395">
  • 5 Contributors
  • 4 Replies
  • 206 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by nosleep365

Recommended Answers

All 4 Replies

Member Avatar for Flexor123

Magic8Computing why do you need Javascript for this. Try keeping the script as clean as possible. If you are trying to incorporate an image into the table cell that shouldn't be too complicated, <table> <tr> <td> <img src="your image here" alt="" /> </td> </tr> </table>

commented: Duh, the words rqandom image in the thread title slipped your notice perhaps -1
Member Avatar for almostbob

as it is the code is wrong
when the javascript is declared in the head before the page is rendered the <td id='hp-random'> element does not exist, setting the attrributes of a non-existent element causes errors
a possible solution is to make the javascript a function and put the function in the onload call for the <body> tag,

<script type='text/javascript'>//langueage='javascript' is deprecated
function randomimg() {var img_rnd = new Array ();
img_rnd[0] = "hp-1.jpg";
img_rnd[1] = "hp-2.jpg";
img_rnd[2] = "hp-3.jpg";
img_rnd[3] = "hp-4.jpg";
img_rnd[4] = "hp-5.jpg";
img_rnd[5] = "hp-6.jpg";
var i = Math.floor(Math.random() * 6);
document.getElementById("hp-random").style.backgroundImage="url("+img_rnd[i]+")";
}	//-->
</script></head><body onload='randoming();'>

or to put the script, as is, after the page loads, between </body> and </html>

javascript will always look wrong, the page will load, the script will process, the background image will download and place itself
the same effect done in a server language is seamless to the user the random image is selected before the page downloads, the page source displayed only includes the current image, thew downloaded page is slightly smaller

Member Avatar for racoon8995

@flexor123- he wants a random image..your code will give a single fixed cell image.
@poster- try almostbobs advice,tink it shld work...u might also tink of using a light animation software such as swishmax to do an anim. instead and place it in the cell.gluck

Member Avatar for nosleep365

Hi, I am trying to do a similar things, have a random image as a table background.

I've got a script that works in IE and Safari, but for some reason not in Firefox!

Here is the code I'm using:

<script type="text/javascript">
var images = new Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg")
onload=function() {
var rand = Math.round(Math.random()*images.length-1)
table1.style.background="url('"+images[rand]+"')"
}
</script>

and then this is the start of my table in the body:

<table id="table1" width="1200" height="828" border="0" cellpadding="0" cellspacing="0" bgcolor="white">

Any help would be much appreciated! I can't get my head round this!

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.