Dual JS image randomizer?

[Morgan19]

I use the following JS for a simple but effective image randomizer:

<SCRIPT LANGUAGE="JavaScript">
	  <!-- Hide from old browsers
	
	  iArray=new Array(
		"images/index_image1.jpg",
		"images/index_image2.jpg",
		"images/index_image3");
	  ri=Math.floor(iArray.length*Math.random());
	  ri='<IMG SRC="'+ iArray[ri]+ '" BORDER=0>';
	// end hiding --></SCRIPT>

<SCRIPT language="JavaScript">
	<!--
	document.write(ri);
	// -->
	</SCRIPT>

That works great to randomly pull one of the images listed. I'm curious, though... Would anyone like to take a crack at expanding that code so that a matching background image is pulled into that image's cell?

Basically what I'm getting at is that I have a cell with the random image code applied to it, but the cell expands horizontally the fill the browser window. Because each of the main images is a finite width, I'm left with a rather large and ugly gaping hole to the right of the image when a user expands their browser. To work around that, I'd like to create a repeating background image for that cell that would give the appearance of the image continuing to the right. Problem is, I have no idea what the code would be to match up each random "main" image with its background image, so that when the main one is randomly displayed the background image would match.

I'd be ridiculously grateful if anyone could help me out here.

Thanks,
m19

 

[Morgan19]

Anyone?

m19

 

[billbaloney]

Here's an adaptation of your code that (a) makes the JavaScript blocks valid XHTML and (b) expands the array to include an associated image and background image that can then be written out somewhere. It sounds as though you're using table tags, so the background gets written as part of a TD tag.

<script type="text/javascript">
//<![CDATA[
	
	/* Array of foreground image paths */
	var iArray = new Array(
		"images/index_image1.jpg",
		"images/index_image2.jpg",
		"images/index_image3.jpg");
	
	/* Array of background image paths */
	var bArray = new Array(
		"images/index_bg1.gif",
		"images/index_bg2.gif",
		"images/index_bg3.gif");
	
	/* Determine random index for both arrays */
	var idx = Math.floor(iArray.length*Math.random());
	
	var imgTag = '<img src="'+ iArray[idx] + '" alt="Foreground image" />';
	
	var tdTag = '<td style="background: url(' + bArray[idx] + ') repeat 0 0">';
	
//]]>
</script>

The block that writes code to the page would have to begin within a table row, as it's writing a table cell.

<table style="width: 500px; height: 500px">
	<tbody>
		<tr>
				<script type="text/javascript">
				//<![CDATA[
					document.write(tdTag);
					
					document.write(imgTag);
				//]]>
				</script>

			</td>
		</tr>
	</tbody>
</table>

You can see it in action here.

HTH

 

[Morgan19]

Wow, thank you for writing that up, that's immensely helpful as I'm not all that familiar with specialized coding like this. I worked it into my page and it seems to work great for the most part, but there's one small issue. The background only repeats for as wide as the main image itself is: so even if that cell expands, the background only repeats as far as the main image. I'm trying to figure out how to get the background to repeat the entire cell's width, independent of the main image's size.

(EDIT-) After playing around a bit, it looks like it's not expanding because to the right of the image is part of the TD, not TR. Now I'm just trying to figure out now how to have the background repeat in the TD without displaying the main image there. The page's already built so it's not as easy as just removing the TD: the page breaks apart.

Thanks!
m19