dual random image genetator...tricky

drappendix · #1 Aug 24th, 2007, 00:59

I need a script that makes a random backround for a single cell. but the tricky part is that i need it to do it for two different cells,,,not load the same image but a similar image. example...if the first cell loads a turtle i need the second cell to load a predetermined image of a another turtls turtle.

Code: Select all

<script type="text/javascript" language="JavaScript">


NumberOfImagesToRotate = 2;


FirstPart = '<img src="images/back';
LastPart = '.jpg">';
index ='t';
 r = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
document.write(FirstPart + r + LastPart);
}
function printtImage() {
document.write(FirstPart + r + index + LastPart);

}
//-->
</script>

and then prints the output to the designated cells. but i need this to make backgrounds instead of placing images.

Rakuli · #2 Sep 1st, 2007, 16:48

If these table cells will be the only two, you could simply add ID's to them and modify their background image.. Your script would look like

Code: Select all

 
<script type="text/javascript" language="JavaScript">
 
 
NumberOfImagesToRotate = 2;
 
 
FirstPart = 'url (images/back';
LastPart = '.jpg)';
index ='t';
r = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
tableCell1.style.backgroundImage = FirstPart + r + LastPart;
tableCell2.style.backgroundImage = FirstPart + r + index + LastPart;
}
 
//-->
</script>

drappendix · #3 Sep 4th, 2007, 00:32

This is what i have.....it seems like this would work..i dunno., i dont know javascript though

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
body {
    background-color: #CCCCCC;
}
-->
</style>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript">
 
 
NumberOfImagesToRotate = 2;
 
 
FirstPart = 'url (images/back';
LastPart = '.jpg)';
index ='t';
r = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
tableCell1.style.backgroundImage = FirstPart + r + LastPart;
tableCell2.style.backgroundImage = FirstPart + r + index + LastPart;
}
 
//-->
</script>
</head>

<body class="bg" topmargin="0" marginheight="0">

<table width="800"  align="center"height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" id="tableCell1">
<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
    <div id="navs"><a href="repair.html" class="navs">computer repair</a></div>
    <div id="navs"><a href="hosting.html" class="navs">web hosting</a></div>
    <div id="navs"><a href="design.html" class="navs">design</a></div>
    <div id="navs"><a href="repair.html" class="navs">data backup</a></div>
    <div id="navs"><a href="training.html" class="navs">computer training</a></div>
    <div id="navs"><a href="contact.html" class="navs">contact</a></div></div>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC">Lorwm aasdasda asd asd asd asd asd asd as das Lorwm aasdasda asd asd asd asd asd asd as das Lorwm  </td>
  </tr>
  <tr>
    <td height="100" id="tableCell2"><div class="footer"><img src="images/copyright.png" /></div></td>
  </tr>
</table>

</body>
</html>

Rakuli · #4 Sep 4th, 2007, 00:39

You need to get the ID's though. Try this

Code: Select all

 
<script type="text/javascript" language="JavaScript">
 
NumberOfImagesToRotate = 2;
 
 
FirstPart = 'url (images/back';
LastPart = '.jpg)';
index ='t';
r = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
document.getElementById('tableCell1').style.backgroundImage = FirstPart + r + LastPart;
document.getElementById('tableCell2').style.backgroundImage = FirstPart + r + index + LastPart;
}
 
//-->
</script>

drappendix · #5 Sep 4th, 2007, 01:26

still no go...

updated code

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
body {
    background-color: #CCCCCC;
}
-->
</style>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript">
 
NumberOfImagesToRotate = 2;
 
 
FirstPart = 'url (images/back';
LastPart = '.jpg)';
index ='t';
r = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
document.getElementById('tableCell1').style.backgroundImage = FirstPart + r + LastPart;
document.getElementById('tableCell2').style.backgroundImage = FirstPart + r + index + LastPart;
}
 
//-->
</script>
</head>

<body class="bg" topmargin="0" marginheight="0">

<table width="800"  align="center"height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" id="tableCell1">
<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
    <div id="navs"><a href="repair.html" class="navs">computer repair</a></div>
    <div id="navs"><a href="hosting.html" class="navs">web hosting</a></div>
    <div id="navs"><a href="design.html" class="navs">design</a></div>
    <div id="navs"><a href="repair.html" class="navs">data backup</a></div>
    <div id="navs"><a href="training.html" class="navs">computer training</a></div>
    <div id="navs"><a href="contact.html" class="navs">contact</a></div></div>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC">Lorwm aasdasda asd asd asd asd asd asd as das Lorwm aasdasda asd asd asd asd asd asd as das Lorwm  </td>
  </tr>
  <tr>
    <td height="100" id="tableCell2"><div class="footer"><img src="images/copyright.png" /></div></td>
  </tr>
</table>

</body>
</html>

are the id's right

Rakuli · #6 Sep 4th, 2007, 01:41

I can't see where you're actually calling the function which would be why nothing is happening.

adding

<script type="text/javascript">
printImage();
</script>

Just after your main table.

drappendix · #7 Sep 4th, 2007, 01:45

i did that and it still wont show.

Rakuli · #8 Sep 4th, 2007, 02:35

Hmmm. puzzling. Let's go back to basics and declare all variables and add abit more oomph so we don't clash with reserved words.

Code: Select all

<script type="text/javascript" language="JavaScript">
 
var NumberOfImagesToRotate = 2;
 
 
var FirstPart = 'url (images/back';
var LastPart = '.jpg)';
var alternativeImg ='t';
var randSelection = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
document.getElementById('tableCell1').style.backgroundImage = FirstPart + randSelection + LastPart;
document.getElementById('tableCell2').style.backgroundImage = FirstPart + randSelection + alternativeImage + LastPart;
}
 
//-->
</script>

drappendix · #9 Sep 4th, 2007, 02:51

still no go

updates html

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
body {
    background-color: #CCCCCC;
}
-->
</style>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript">
 
var NumberOfImagesToRotate = 2;
 
 
var FirstPart = 'url (images/back';
var LastPart = '.jpg)';
var alternativeImg ='t';
var randSelection = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
document.getElementById('tableCell1').style.backgroundImage = FirstPart + randSelection + LastPart;
document.getElementById('tableCell2').style.backgroundImage = FirstPart + randSelection + alternativeImage + LastPart;
}
 
//-->
</script>
</head>

<body class="bg" topmargin="0" marginheight="0">

<table width="800"  align="center"height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" id="tableCell1">
<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
    <div id="navs"><a href="repair.html" class="navs">computer repair</a></div>
    <div id="navs"><a href="hosting.html" class="navs">web hosting</a></div>
    <div id="navs"><a href="design.html" class="navs">design</a></div>
    <div id="navs"><a href="repair.html" class="navs">data backup</a></div>
    <div id="navs"><a href="training.html" class="navs">computer training</a></div>
    <div id="navs"><a href="contact.html" class="navs">contact</a></div></div>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC">Lorwm aasdasda asd asd asd asd asd asd as das Lorwm aasdasda asd asd asd asd asd asd as das Lorwm  </td>
  </tr>
  <tr>
    <td height="100" id="tableCell2">
<div class="footer"><img src="images/copyright.png" /></div></td>
  </tr>
</table>
<script type="text/javascript">
printImage();
</script>



</body>
</html>

there would be no conflict with css correct.

drappendix · #10 Sep 4th, 2007, 02:52

whe run in ie there is an error "invalid argument".....line 29....but nothing in firefox

Rakuli · #11 Sep 4th, 2007, 03:05

does ff add images correctly?

the only thing i can see that would cause the ie error could be the mat.ceil but it looks fine

I'm not being much help wid this one,, lol

drappendix · #12 Sep 4th, 2007, 03:26

i think it was because the variable name did not match in the statement..... "Image" instead of "Img"...i changed it but still no go. I dont know what the problem can be. Can this even be done with an individual cell?

Rakuli · #13 Sep 4th, 2007, 06:45

It really should be working - **Rakuli bangs head on keyboad**

My last suggestion would be to fill the table cells with a div

<div style="width: 100%;height:200px" id="tableCell1">

drappendix · #14 Sep 4th, 2007, 20:17

no that doesn't do it either. if you say it should be working i trust you....do you have anyone you can ask....should i repost a thread?

Rakuli · #15 Sep 5th, 2007, 05:32

Code: Select all

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
body {
    background-color: #CCCCCC;
}
-->
</style>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript">
 
var NumberOfImagesToRotate = 2;
 
 
var FirstPart = 'images/back';
var LastPart = '.jpg';
var alternativeImg ='t';
var randSelection = Math.ceil(Math.random() * NumberOfImagesToRotate);
function printImage() {
//after loading the id's into variables you could almost get rid of the 
//second function
 
tbc1 = document.getElementById('tableCell1');
tbc2 = document.getElementById('tableCell2');
tbc1.style.backgroundImage = 'url('+FirstPart + randSelection + LastPart+')';
tbc2.style.backgroundImage = 'url('+FirstPart + randSelection + alternativeImg + LastPart+')';
}
 
//-->
</script>
</head>
<body class="bg" topmargin="0" marginheight="0">
<table width="800"  align="center"height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" id="tableCell1">
<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>
    <div id="navs"><a href="repair.html" class="navs">computer repair</a></div>
    <div id="navs"><a href="hosting.html" class="navs">web hosting</a></div>
    <div id="navs"><a href="design.html" class="navs">design</a></div>
    <div id="navs"><a href="repair.html" class="navs">data backup</a></div>
    <div id="navs"><a href="training.html" class="navs">computer training</a></div>
    <div id="navs"><a href="contact.html" class="navs">contact</a></div>
 </div>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCCCC">Lorwm aasdasda asd asd asd asd asd asd as das Lorwm aasdasda asd asd asd asd asd asd as das Lorwm  </td>
  </tr>
  <tr>
    <td height="100" id="tableCell2">
<div class="footer"><img src="images/copyright.png" /></div>
</td>
  </tr>
</table>
<script type="text/javascript">
printImage();
</script>
 
</body>
</html>

I just tried this on my computer and it works - the backgroundImage declaration wasn't working quite right.

If you image paths are correct this will work (FF & IE).

Cheers,

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
dual random image genetator...tricky