homepage Welcome to WebmasterWorld Guest from 54.227.11.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Change image in table cell background - on reload
I've tried and tried...
pillageTHENburn




msg:603181
 12:46 am on Sep 26, 2002 (gmt 0)

Ok the deal is this:
I'm trying to make the image background in only one frame of a table change (randomly) when the page is realoaded.

I have successfully found a bgcolor OnLoad change and an Img Src change, but I can not seem to get my background image to change OnLoad. I am not good enough at JavaScript yet to get this done in the time I need it. I was hoping that maybe someone here could help!?
Thank you for your time!

 

tedster




msg:603182
 4:16 am on Sep 26, 2002 (gmt 0)

There may be a more straightforward way to do it, but I'm thinking about writing a bunch of css files (file1.css, file2.css, etc.) In each one only define the background-image for that table cell (give that cell its own class).

Then use document.write to cascade in a random choice for the secondary css. Just use js to generate a random integer that you append to "file" and a regular <link> to call the css. Everytime the page is loaded, the js would fire a new random number and there you go. NOt even a need to touch the BODY tag.

pillageTHENburn




msg:603183
 5:06 pm on Sep 26, 2002 (gmt 0)

Hmm, that has crossed my mind (only because its been suggested) I honestly don't know if I could successfully write that one either. I was really hoping someone had encountered this problem before so that I could "cut and paste" then edit to my liking...
If anyone can think of a way to do this that would rock!
Thanks,
-Linus

aspr1n




msg:603184
 6:50 pm on Sep 26, 2002 (gmt 0)

Check out this url:

[projectseven.com...]

and download the Dreamweaver SwapClass extention ( assuming you have DW!). This works well, and have used it a number of times.

It should then be fairly trivial to write a little javascript something along the lines of:

ClassDefault = 'ThisClass_1';
CurrentClass = YourCurrentClass;
var current = CurrentClass.substring(1); // This bit splits the number from the _.
if ( current != '5' ) {
current++;
SwapClass ( "ClassName_" + 'current' );
}
else if ( current = '1' )
SwapClass ( "ClassName_" + 'current' );

BTW the above won't cut and paste, but will give you an idea of what to use. Check out the NS Javascript reference as it is very easy:

[developer.netscape.com...]

asp

pillageTHENburn




msg:603185
 1:07 am on Sep 29, 2002 (gmt 0)

Here is a random image change I found...Is there a way I could modify this to work for me? (it baffles me)

<script language="JavaScript">

blibVerts = new Array('text or URL','text or URL','text or URL','text or URL');

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
return Math.ceil(rnd()*number);
};

function _CF_checkCFForm_1(_CF_this)
{
return true;
}
function _CF_checkCFForm_1(_CF_this)
{
return true;
}
</script>

<script language="JavaScript">

document.write(blibVerts[rand(blibVerts.length)-1])
</script>

Like I said, I am new to this, still trying to learn. I'd like to use it to change a background image (in a table cell preferably).
Thanks,
-Linus

aspr1n




msg:603186
 10:38 am on Sep 30, 2002 (gmt 0)

Yep you certainly could:

Firstly, you don't need the bit:


function _CF_checkCFForm_1(_CF_this)
{
return true;
}
function _CF_checkCFForm_1(_CF_this)
{
return true;
}

This bit:

<script language="JavaScript">
document.write(blibVerts[rand(blibVerts.length)-1])
</script>

Is called from you body, where you might put the code for the <TD>, the "document.write" dynamically inserts it into the document for you.

What it inserts is defined in the section:


blibVerts = new Array('text or URL','text or URL','text or URL','text or URL');

in between each comma is one of your options, so you might replace this with:


blibVerts = new Array('<td background="image1.jpg">Image 1</td>','<td background="image2.jpg">Image 2</td>','<td background="image3.jpg">Image 3</td>');

and because "blibVerts" doesn't really mean anything you might like to change for it for clarity to:


imgswap = new Array('<td background="image1.jpg">Image 1</td>','<td background="image2.jpg">Image 2</td>','<td background="image3.jpg">Image 3</td>');

Then call "imgswap" from your body rather than "blibVerts".

The rest of the code:


rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
return Math.ceil(rnd()*number);
};

creates a random seed number based on today's date and current time, and uses this as a subscript into your array of options.

(An array is like a spreadsheet, each option is on a seperate row, and you reference an item with it's row number.)

The nice thing about this is, you don't have to tell it how many items it should pick from, it reads how many items you've listed (rows in your array) and picks a number from that.

The code below changes a <TD> background colour, so it check this out and just change for image urls instead:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">

imgswap = new Array('<td bgcolor="#CCCCCC">&nbsp;</td>','<td bgcolor="#FFFFFF">&nbsp;</td>','<td bgcolor="#666666">&nbsp;</td>','<td bgcolor="#333333">&nbsp;</td>');

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
return Math.ceil(rnd()*number);
};

</script>

</head>
<body>
<table width="100" border="0">
<tr>
<script language="JavaScript">
document.write(imgswap[rand(imgswap.length)-1])
</script>
</tr>
</table>

</body>
</html>

asp

pillageTHENburn




msg:603187
 5:44 pm on Sep 30, 2002 (gmt 0)

Awesome! Thank you so much! I'm gonna' give it a try right now. Sorry I'm a little slow in learning this stuff, JavaScript is VERY new to me (no more than two weeks). You've been more help than most places I've looked! I'll be sure to stick around and ask more questions! Thanks again!
-Linus

pillageTHENburn




msg:603188
 6:07 pm on Sep 30, 2002 (gmt 0)

Asp,
IT WORKS! Yesss! Thank you! I'm pretty new, a client wanted the background image change...I was lost, now I'm found. Thank you.
Rock.
-Linus

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved