Random table cell background image

6 posts by 2 authors in: Forums > CMS Builder
Last Post: October 7, 2011   (RSS)

I know it's pretty easy to set up a random image and/or text in CMSB, but is it possible to have a random background image in a table cell? I have a random image feature on a site, but it's coded manually: http://thecoachesloft.com/index.php. Here's the code that I'm using in the document head:

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

var image = new Array();

image[0] = 'images/background-01.jpg' ;
image[1] = 'images/background-02.jpg' ;
image[2] = 'images/background-03.jpg' ;
image[3] = 'images/background-04.jpg' ;
image[4] = 'images/background-05.jpg' ;

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


This is the code for displaying one of five random images as the background of a table cell:

<TD CLASS="title" COLSPAN="7" ALIGN="LEFT" VALIGN="TOP"><TABLE WIDTH="1000" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD><IMG SRC="images/single-pixel.gif" WIDTH="717" HEIGHT="1"></TD>
<TD CLASS="tdBlackTint"><H1 CLASS="h1HomeIntroHead"><?php echo $homepage_contentRecord['title'] ?></H1>
<P CLASS="pHomeIntroText"><?php echo $homepage_contentRecord['intro'] ?></P>
</TD>
</TR>


</TABLE></TD>


Thanks!
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net

Re: [NigelGordijk] Random table cell background image

By Jason - April 26, 2011

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
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [NigelGordijk] Random table cell background image

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!
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net
Attachments:

index2_005.php 19K

Re: [NigelGordijk] Random table cell background image

By Jason - October 7, 2011

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
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Random table cell background image

Perfect! Thanks for your help.
Nigel Gordijk

Common Sense Design: User-focused Web design
Tel: 001 519 342 5348 | Web: www.commonsensedesign.net