Random table cell background image

Hi Nigel,

Just to clarify, you're referring to having a section in CMS Builder where you store your different images and then having those images put into your javascript dynamically. Is that right?

If so, you can do something like this. In this example, I'm assuming your using a single record section called "randomImages" and that section has an upload field called "images".

First, we get our image records like this:

<?php
list($randomImageRecord, $randomImageMetaData) = getRecords(array(
'tableName' => 'randomImages',
'limit' => 1,
'allowSearch' => false,
));

$images = array();

if ($randomImageRecord) {
$images = $randomImageRecord[0]['images'];
}
?>

Then you can output these images into your javascript like this:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

var image = new Array();

<?php $counter = 0; ?>
<?php foreach ($images as $image): ?>
image[<?php echo $counter++; ?>] = '<?php echo $image['urlPath'];?>' ;
<?php endforeach ?>

var index = Math.floor(Math.random() * image.length);
document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
//-->
</SCRIPT>

Hope this helps

Thanks, Jason. This worked perfectly!

Hi, Jason.

I'm trying to use the same technique on another site, but the image isn't showing up. Any idea why, please?

<TABLE WIDTH="1000" HEIGHT="100" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD>

<?php
list($randomImageRecord, $randomImageMetaData) = getRecords(array(
'tableName' => 'slideshow',
'limit' => 1,
'allowSearch' => false,
));

$images = array();

if ($randomImageRecord) {
$images = $randomImageRecord[0]['images'];
}
?>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

var image = new Array();

<?php $counter = 0; ?>
<?php foreach ($images as $image): ?>
image[<?php echo $counter++; ?>] = '<?php echo $image['urlPath'];?>' ;
<?php endforeach ?>

var index = Math.floor(Math.random() * image.length);
document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
//-->
</SCRIPT>

<TABLE WIDTH="999" HEIGHT="100" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD>...</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Here's the live page: http://www.masselsmarine.com/index2.php

Thanks!

Hi Nigel,

I took a look and I think the problem is that you have no <td> with class title.

The css rule that your javascript prints out is for td.title, so your tag for the cell you want the image to appear in would look like this:

<td class = "title"></td>

Hope this helps