Note that Math.random() can give equal results so you have to use variations of the variable index in order to get different pictures in each cell.This works perfect for me:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>
td.title {
height: 150px;
width: 160px;
padding: 10px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titles {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titled {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlef {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
</style>
<script language="JavaScript" type="text/javascript"><!--
var image = new Array();
image[0] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg' ;
image[1] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg' ;
image[2] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg' ;
image[3] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/4.jpg' ;
image[4] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/5.jpg' ;
var index = Math.floor(Math.random() * image.length);
var indexb;
var indexc;
var indexd;
if (index>=0 && index<3)
indexb = index + 2;
else
indexb = index - 2;
if (index!=4)
indexc = index + 1;
if (index!=0)
indexd = index - 1;
document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
document.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
document.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
//-->
</script>
</head>
<body>
<table width='550' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='titles' colspan='2'><h1><%Title%> </h1></td>
<td class='titled' colspan='2'><h1><%Title%> </h1></td>
<td class='titlef' colspan='2'><h1><%Title%> </h1></td></tr>
<!-- BEGIN LEFT SIDE -->
</td></tr></table>
</body>
</html>
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 10
Solved Threads: 6
You forgot to put // after http: Also you forgot to create another tds in order to have 7 images in the table and the javascript function(document.write) which writes the images in the table. Also you need to create another variables for the random numbers. This is the code.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>
td.title {
height: 177px;
width: 165px;
padding: 0px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titles {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titled {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlef {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titleg {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titleh {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlej {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
</style>
<script language="JavaScript" type="text/javascript"><!--
var image = new Array();
image[0] = 'http://kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
image[1] = 'http://kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
image[2] = 'http://kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
image[3] = 'http://kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
image[4] = 'http://kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
image[5] = 'http://kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
image[6] = 'http://kqimageserver.com/pwimages/new/testimages/random.jpg' ;
var index = Math.floor(Math.random() * image.length);
var indexb;
var indexc;
var indexd;
var indexf;
var indexg;
var indexh;
if (index == 0)
{indexb = index + 1;
indexc = index + 2;
indexd = index + 3;
indexf = index + 4;
indexg = index + 5;
indexh = index + 6;}
else if (index == 1)
{indexb = index - 1;
indexc = index + 1;
indexd = index + 2;
indexf = index + 3;
indexg = index + 4;
indexh = index + 5;}
else if (index == 2)
{indexb = index - 2;
indexc = index - 1;
indexd = index + 1;
indexf = index + 2;
indexg = index + 3;
indexh = index + 4;}
else if (index == 3)
{indexb = index - 3;
indexc = index - 2;
indexd = index - 1;
indexf = index + 1;
indexg = index + 2;
indexh = index + 3;}
else if (index == 4)
{indexb = index - 4;
indexc = index - 3;
indexd = index - 2;
indexf = index - 1;
indexg = index + 1;
indexh = index + 2;}
else if (index == 5)
{indexb = index - 5;
indexc = index - 4;
indexd = index - 3;
indexf = index - 2;
indexg = index - 1;
indexh = index + 1;}
else if (index == 6)
{indexb = index - 6;
indexc = index - 5;
indexd = index - 4;
indexf = index - 3;
indexg = index - 2;
indexh = index - 1;}
else if (index == 7)
{indexb = index - 7;
indexc = index - 6;
indexd = index - 5;
indexf = index - 4;
indexg = index - 3;
indexh = index - 2;}
d = document;
d.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
d.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
d.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
d.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
d.write('<style type="text/css"> td.titleg { background-image: url('+ image[indexf]+') } </style>');
d.write('<style type="text/css"> td.titleh { background-image: url('+ image[indexg]+') } </style>');
d.write('<style type="text/css"> td.titlej { background-image: url('+ image[indexh]+') } </style>');
//-->
</script>
</head>
<body>
<table width='660' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='titles' colspan='2'><h1><%Title%> </h1></td>
<td class='titled' colspan='2'><h1><%Title%> </h1></td>
<td class='titlef' colspan='2'><h1><%Titlw%> </h1></td>
<td class='titleg' colspan='2'><h1><%Title%> </h1></td>
<td class='titleh' colspan='2'><h1><%Title%> </h1></td>
<td class='titlej' colspan='2'><h1><%Title%> </h1></td></tr>
<!-- BEGIN LEFT SIDE -->
</td></tr></table>
</body>
</html>
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 10
Solved Threads: 6
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 10
Solved Threads: 6
If you don't want to have the yellow traingle popup remove the alert function from the code. I've refreshed the page many times and not having problem when the red is first.
If you want more images specify var count with the wanted number. If you want more images add more tds.
IMPORTANT: Use my last code on page 1 of this thread because I saw you are not using the proper code.
As I see http://newpw.delphi-ts.net/test/testy2.aspx is working without problems even when the red is on first position.
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 10
Solved Threads: 6
