943,169 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > need random images in 4 cells - can anyone help?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 30th, 2010
0

need random images in 4 cells - can anyone help?

Expand Post »
Hi all -- I need to put a table w/ 4 cells (across) to display recommended/suggested items. I want them to all be random each time someone visits or refreshes, I will have a current pool of about a dozen images to be pulled from..

I have found the code below, I edited it to be 4 td cells from one, however, as expected, it only pulls the same image randomly into all 4. I would like 4 separate ones.

Can anyone help me to edit this further to call in 4 different random images in the 4 cells? Do I need to have, for example: td.title1 title2 title3 title4 in the css? Thank you in advance.


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <head>
  2. <meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
  3. <title><%WindowTitle%></title>
  4. <style type='text/css'>
  5.  
  6. td.title {
  7.    height: 150px;
  8.    width: 160px;
  9.    padding: 10px; 
  10.    border: 3px solid #666666;
  11.    border-top: none;
  12.    vertical-align: bottom;
  13.  
  14. }
  15.  
  16. </style>
  17.  
  18. <script language="JavaScript" type="text/javascript"><!--
  19.  
  20. var image = new Array();
  21.  
  22. image[0] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg' ;
  23. image[1] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg' ;
  24. image[2] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg' ;
  25. image[3] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/4.jpg' ;
  26. image[4] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/5.jpg' ;
  27.  
  28. var index = Math.floor(Math.random() * image.length);
  29. document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
  30. //-->
  31. </script>
  32.  
  33.  
  34. </head>
  35. <body>
  36.  
  37. <table width='550' cellpadding='0' cellspacing='0'>
  38. <tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
  39. <td class='title' colspan='2'><h1><%Title%> </h1></td>
  40. <td class='title' colspan='2'><h1><%Title%> </h1></td>
  41. <td class='title' colspan='2'><h1><%Title%> </h1></td></tr>
  42. <tr>
  43. <td class='leftside' width='550' valign='top'>
  44. <!-- BEGIN LEFT SIDE -->
  45.  
  46. </td></tr></table>
  47.  
  48.  
  49. </body>
Last edited by Ezzaral; Aug 30th, 2010 at 7:19 pm. Reason: Added code tags. Please use them to format any code that you post.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Aug 30th, 2010
0
Re: need random images in 4 cells - can anyone help?
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
  4. <title><%WindowTitle%></title>
  5. <style type='text/css'>
  6.  
  7. td.title {
  8. height: 150px;
  9. width: 160px;
  10. padding: 10px; 
  11. border: 3px solid #666666;
  12. border-top: none;
  13. vertical-align: bottom;
  14.  
  15. }
  16. td.titles {
  17. height: 150px;
  18. width: 160px;
  19. border: 3px solid #666666;
  20. border-top: none;
  21. vertical-align: bottom;
  22. }
  23. td.titled {
  24. height: 150px;
  25. width: 160px;
  26. border: 3px solid #666666;
  27. border-top: none;
  28. vertical-align: bottom;
  29. }
  30. td.titlef {
  31. height: 150px;
  32. width: 160px;
  33. border: 3px solid #666666;
  34. border-top: none;
  35. vertical-align: bottom;
  36. }
  37. </style>
  38.  
  39. <script language="JavaScript" type="text/javascript"><!--
  40.  
  41. var image = new Array();
  42.  
  43. image[0] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg' ;
  44. image[1] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg' ;
  45. image[2] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg' ;
  46. image[3] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/4.jpg' ;
  47. image[4] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/5.jpg' ;
  48.  
  49. var index = Math.floor(Math.random() * image.length);
  50. var indexb;
  51. var indexc;
  52. var indexd;
  53. if (index>=0 && index<3)
  54. indexb = index + 2;
  55. else
  56. indexb = index - 2;
  57. if (index!=4)
  58. indexc = index + 1;
  59. if (index!=0)
  60. indexd = index - 1;
  61.  
  62. document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
  63. document.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
  64. document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
  65. document.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
  66.  
  67. //-->
  68. </script>
  69.  
  70.  
  71. </head>
  72. <body>
  73.  
  74. <table width='550' cellpadding='0' cellspacing='0'>
  75. <tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
  76. <td class='titles' colspan='2'><h1><%Title%> </h1></td>
  77. <td class='titled' colspan='2'><h1><%Title%> </h1></td>
  78. <td class='titlef' colspan='2'><h1><%Title%> </h1></td></tr>
  79.  
  80. <!-- BEGIN LEFT SIDE -->
  81.  
  82. </td></tr></table>
  83.  
  84.  
  85. </body>
  86. </html>
Reputation Points: 10
Solved Threads: 6
Junior Poster in Training
george61 is offline Offline
59 posts
since Jul 2010
Permalink
Aug 31st, 2010
0
Re: need random images in 4 cells - can anyone help?
George - thank you very much! I will try and check that out today! I will let you know if I got it working in case anyone else will need the info! Thanks alot!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Aug 31st, 2010
0
Re: need random images in 4 cells - can anyone help?
Hey George - it works great -- one thing though that I cannot figure out - I have made like 7 random images, get them in the table cells great -- but titled and titlef, the last two columns occasionally populate with no image at all -- not sure why. I have the code below>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  <html>
  2.         <head>
  3.        <meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
  4.         <title><%WindowTitle%></title>
  5.        <style type='text/css'>
  6.  
  7. td.title {
  8.         height: 177px;
  9.        width: 165px;
  10.         padding: 0px;
  11.         border: 1px solid #666666;
  12.         border-top: none;
  13.         vertical-align: bottom;
  14.        }
  15.  
  16. td.titles {
  17.        height: 177px;
  18.        width: 165px;
  19.        border: 1px solid #666666;
  20.        border-top: none;
  21.        vertical-align: bottom;
  22.         }
  23.  
  24. td.titled {
  25.       height: 177px;
  26.       width: 165px;
  27.       border:1px solid #666666;
  28.       border-top: none;
  29.       vertical-align: bottom;
  30.        }
  31.  
  32. td.titlef {
  33.       height: 177px;
  34.       width: 165px;
  35.       border: 1px solid #666666;
  36.       border-top: none;
  37.       vertical-align: bottom;
  38.        }
  39.        </style>
  40.        <script language="JavaScript" type="text/javascript"><!--
  41.  
  42.       var image = new Array();
  43.        image[0] = 'http:kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
  44.        image[1] = 'http:kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
  45.        image[2] = 'http:kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
  46.        image[3] = 'http:kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
  47.        image[4] = 'http:kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
  48. 	   image[5] = 'http:kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
  49. 	    image[6] = 'http:kqimageserver.com/pwimages/new/testimages/random.jpg' ;
  50.  
  51. 		var index = Math.floor(Math.random() * image.length);
  52.        var indexb;
  53.       var indexc;
  54.        var indexd;
  55.        if (index>=0 && index<3)
  56.       indexb = index + 2;
  57.        else
  58.       indexb = index - 2;
  59.         if (index!=4)
  60.       indexc = index + 1;
  61.         if (index!=0)
  62.       indexd = index - 1;
  63.  
  64.       document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
  65.        document.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
  66.       document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
  67.       document.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
  68.  
  69.       //-->
  70.        </script>
  71.         </head>
  72.        <body>
  73.        <table width='660' cellpadding='0' cellspacing='0'>
  74.        <tr>
  75.        <td class='title'><h1><%Title%> </h1></td>
  76.        <td class='titles'><h1><%Title%> </h1></td>
  77.        <td class='titled'><h1><%Title%> </h1></td>
  78.        <td class='titlef'><h1><%Title%> </h1></td></tr>
  79.  
  80.       <!-- BEGIN LEFT SIDE -->
  81.  
  82.       </td></tr></table>
  83.  
  84.       </body>
  85.        </html>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Sep 1st, 2010
0
Re: need random images in 4 cells - can anyone help?
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
  4. <title><%WindowTitle%></title>
  5. <style type='text/css'>
  6.  
  7. td.title {
  8. height: 177px;
  9. width: 165px;
  10. padding: 0px; 
  11. border: 1px solid #666666;
  12. border-top: none;
  13. vertical-align: bottom;
  14.  
  15. }
  16. td.titles {
  17. height: 177px;
  18. width: 165px;
  19. border: 1px solid #666666;
  20. border-top: none;
  21. vertical-align: bottom;
  22. }
  23. td.titled {
  24. height: 177px;
  25. width: 165px;
  26. border: 1px solid #666666;
  27. border-top: none;
  28. vertical-align: bottom;
  29. }
  30. td.titlef {
  31. height: 177px;
  32. width: 165px;
  33. border: 1px solid #666666;
  34. border-top: none;
  35. vertical-align: bottom;
  36. }
  37. td.titleg {
  38. height: 177px;
  39. width: 165px;
  40. border: 1px solid #666666;
  41. border-top: none;
  42. vertical-align: bottom;
  43. }
  44. td.titleh {
  45. height: 177px;
  46. width: 165px;
  47. border: 1px solid #666666;
  48. border-top: none;
  49. vertical-align: bottom;
  50. }
  51. td.titlej {
  52. height: 177px;
  53. width: 165px;
  54. border: 1px solid #666666;
  55. border-top: none;
  56. vertical-align: bottom;
  57. }
  58. </style>
  59.  
  60. <script language="JavaScript" type="text/javascript"><!--
  61.  
  62. var image = new Array();
  63.  
  64. image[0] = 'http://kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
  65.        image[1] = 'http://kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
  66.        image[2] = 'http://kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
  67.        image[3] = 'http://kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
  68.        image[4] = 'http://kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
  69. 	   image[5] = 'http://kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
  70. 	    image[6] = 'http://kqimageserver.com/pwimages/new/testimages/random.jpg' ;
  71.  
  72. var index = Math.floor(Math.random() * image.length);
  73. var indexb;
  74. var indexc;
  75. var indexd;
  76. var indexf;
  77. var indexg;
  78. var indexh;
  79. if (index == 0)
  80. {indexb = index + 1;
  81. indexc = index + 2;
  82. indexd = index + 3;
  83. indexf = index + 4;
  84. indexg = index + 5;
  85. indexh = index + 6;}
  86. else if (index == 1)
  87. {indexb = index - 1;
  88. indexc = index + 1;
  89. indexd = index + 2;
  90. indexf = index + 3;
  91. indexg = index + 4;
  92. indexh = index + 5;}
  93. else if (index == 2)
  94. {indexb = index - 2;
  95. indexc = index - 1;
  96. indexd = index + 1;
  97. indexf = index + 2;
  98. indexg = index + 3;
  99. indexh = index + 4;}
  100. else if (index == 3)
  101. {indexb = index - 3;
  102. indexc = index - 2;
  103. indexd = index - 1;
  104. indexf = index + 1;
  105. indexg = index + 2;
  106. indexh = index + 3;}
  107. else if (index == 4)
  108. {indexb = index - 4;
  109. indexc = index - 3;
  110. indexd = index - 2;
  111. indexf = index - 1;
  112. indexg = index + 1;
  113. indexh = index + 2;}
  114. else if (index == 5)
  115. {indexb = index - 5;
  116. indexc = index - 4;
  117. indexd = index - 3;
  118. indexf = index - 2;
  119. indexg = index - 1;
  120. indexh = index + 1;}
  121. else if (index == 6)
  122. {indexb = index - 6;
  123. indexc = index - 5;
  124. indexd = index - 4;
  125. indexf = index - 3;
  126. indexg = index - 2;
  127. indexh = index - 1;}
  128. else if (index == 7)
  129. {indexb = index - 7;
  130. indexc = index - 6;
  131. indexd = index - 5;
  132. indexf = index - 4;
  133. indexg = index - 3;
  134. indexh = index - 2;}
  135.  
  136. d = document;
  137. d.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
  138. d.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
  139. d.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
  140. d.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
  141. d.write('<style type="text/css"> td.titleg { background-image: url('+ image[indexf]+') } </style>');
  142. d.write('<style type="text/css"> td.titleh { background-image: url('+ image[indexg]+') } </style>');
  143. d.write('<style type="text/css"> td.titlej { background-image: url('+ image[indexh]+') } </style>');
  144.  
  145. //-->
  146. </script>
  147.  
  148.  
  149. </head>
  150. <body>
  151.  
  152. <table width='660' cellpadding='0' cellspacing='0'>
  153. <tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
  154. <td class='titles' colspan='2'><h1><%Title%> </h1></td>
  155. <td class='titled' colspan='2'><h1><%Title%> </h1></td>
  156. <td class='titlef' colspan='2'><h1><%Titlw%> </h1></td>
  157. <td class='titleg' colspan='2'><h1><%Title%> </h1></td>
  158. <td class='titleh' colspan='2'><h1><%Title%> </h1></td>
  159. <td class='titlej' colspan='2'><h1><%Title%> </h1></td></tr>
  160.  
  161. <!-- BEGIN LEFT SIDE -->
  162.  
  163. </td></tr></table>
  164.  
  165.  
  166. </body>
  167. </html>
Reputation Points: 10
Solved Threads: 6
Junior Poster in Training
george61 is offline Offline
59 posts
since Jul 2010
Permalink
Sep 2nd, 2010
0
Re: need random images in 4 cells - can anyone help?
Okay, thanks -- I'll check it out, but I just want to say I don't want 7 images on the page -- I want four images -- but a pool of about 10 different ones the table pulls from.
If this makes any difference in what you put up there, I would so appreciate one more bit of help -- it seemed to work fine except for some reason the 3rd and 4th td cell pulled in a blank (no) image and I couldn't see why.
Thank you again.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Sep 10th, 2010
0
Re: need random images in 4 cells - can anyone help?
I have a pseudo page up -- can anyone look at it and tell me how I can get my random images to come into the gray bordered cells?? I'd really appreciate it!

http://newpw.delphi-ts.net/test/testy.aspx


I got it to work fine until it got put in asp. net master page.
Last edited by keltoid; Sep 10th, 2010 at 1:12 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Sep 10th, 2010
0
Re: need random images in 4 cells - can anyone help?
Hey George and all -- I got it working pretty much, only problem is that the cells sometimes populate with no image at all -- not sure why it would do that - I have ten images to choose from in a folder - I am only displaying four at a time --

George, can you see the possibility for a more random algorithm for 10 images? This is what I have:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 	var index = Math.floor(Math.random() * image.length);
  2.        var indexb;
  3.       var indexc;
  4.        var indexd;
  5.        if (index>=0 && index<3)
  6.       indexb = index + 2;
  7.        else
  8.       indexb = index - 2;
  9.         if (index!=4)
  10.       indexc = index + 1;
  11.         if (index!=0)
  12.       indexd = index - 1;

not sure if I can do better than that, and how i can stop the odd no image thing from happening. If its any help, it seems to happen only (or most) in the 3rd and 4th cell. titlec and titled)

Here is the relevent code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <asp:Content ContentPlaceHolderID="cphBody" runat="server">
  2.   <style type='text/css'>
  3.  
  4. td.titlea {
  5.         height: 174px;
  6.        width: 140px;
  7.         padding: 0px;
  8.         border: 1px solid #eeeeee;
  9.        vertical-align: bottom;
  10. 	   margin-right:2px;
  11.        }
  12.  
  13. td.titleb {
  14.        height: 174px;
  15.        width: 160px;
  16.        border: 1px solid #eeeeee;
  17.        vertical-align: bottom;
  18. 	    margin-right:2px;
  19.         }
  20.  
  21. td.titlec {
  22.       height: 174px;
  23.       width: 140px;
  24.       border:1px solid #eeeeee;
  25.       vertical-align: bottom;
  26. 	   margin-right:2px;
  27.        }
  28.  
  29. td.titled {
  30.       height: 174px;
  31.       width: 140px;
  32.       border: 1px solid #eeeeee;
  33.       vertical-align: bottom;
  34. 	   margin-right:2px;
  35.        }
  36.        </style>
  37.        <script language="JavaScript" type="text/javascript"><!--
  38.  
  39.  var image = new Array();
  40.        image[0] = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
  41.        image[1] = 'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
  42.        image[2] = 'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
  43.        image[3] = 'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
  44.        image[4] = 'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
  45. 	   image[5] = 'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
  46. 	   image[6] = 'https://www.kqimageserver.com/pwimages/new/testimages/random.jpg' ;
  47. 	   image[7] = 'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg' ;
  48.        image[8] = 'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg' ;
  49. 	   image[9] = 'https://www.kqimageserver.com/pwimages/new/testimages/random9.jpg' ;
  50. 	   image[10] = 'https://www.kqimageserver.com/pwimages/new/testimages/random10.jpg' ;
  51.  
  52. 		var index = Math.floor(Math.random() * image.length);
  53.        var indexb;
  54.       var indexc;
  55.        var indexd;
  56.        if (index>=0 && index<5)
  57.       indexb = index + 2;
  58.        else
  59.       indexb = index - 2;
  60.         if (index!=4)
  61.       indexc = index + 1;
  62.         if (index!=0)
  63.       indexd = index - 1;
  64.  
  65.       document.write('<style type="text/css"> td.titlea { background-image: url('+ image[index] +') } </style>');
  66.        document.write('<style type="text/css"> td.titleb { background-image: url('+ image[indexb] +') } </style>');
  67.       document.write('<style type="text/css"> td.titlec { background-image: url('+ image[indexc] +') } </style>');
  68.       document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexd] +') } </style>');
  69.  
  70.       //-->
  71.        </script>
  72.  
  73.   <table border="0" width="665" cellpadding="0" cellspacing="0" align="left">
  74.     <tr align="left">
  75.       <td class="flash" valign="top">
  76.  
  77. 		 <div align="left">  
  78.           <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="630" height="220"> etc </embed>
  79.           </object>
  80.           <br />		  
  81.           <table class="signup"><tr>
  82.             <td width="159" height="26" align="center"><span>REQUEST A CATALOG </span> </td>
  83. 		    <td class="divider" width="471" align="left"><span>EMAIL UPDATES </span>
  84. <asp:TextBox id="txtEmail" runat="server" Width="112px" CssClass="email_text"></asp:TextBox>&nbsp;
  85.     <asp:Button id="btnSubmitEmail" runat="server" Text="sign up" CssClass="email_button" CausesValidation="true"></asp:Button><span>Join now!</span> <a href="http://newpw.delphi-ts.net/signup.aspx"><span>Why?</span></a></span> 
  86.  </td>
  87. 		  </tr></table>   <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"
  88.         ErrorMessage="You must enter a valid email address." ValidationExpression="\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b" CssClass="required" ForeColor=""></asp:RegularExpressionValidator>
  89.       </div>
  90. 	  </td>   
  91.     </tr>
  92.     <tr valign="top" align="center">
  93.      <td align="center"><p>
  94.       <table width='630' cellpadding='0' cellspacing='0' bgcolor="#ffffff" align="left" style="margin-left:6px;">
  95.        <tr>
  96.        <td class='titlea' style="width:157px"><h1> </h1></td>
  97.        <td class='titleb' style="width:157px"><h1> </h1></td>
  98.        <td class='titlec' style="width:157px"><h1> </h1></td>
  99.        <td class='titled' style="width:157px"><h1> </h1></td></tr>
  100.        </tr>
  101.       </table>     
  102.  
  103.           <p></p>
  104.           <p></p>           
  105.           <p></p>
  106.  
  107.       </td>
  108.     </tr>
  109.   </table>
  110. </asp:Content>

THANK YOU! If anyone can get this working better, I'll buy you a beer! And by better, I mean that nasty "no image at all" thing never happens! Have a good weekend!
Last edited by keltoid; Sep 10th, 2010 at 5:45 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006
Permalink
Sep 12th, 2010
0
Re: need random images in 4 cells - can anyone help?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. 	<head>
  3. 		<title>
  4. 			Genrator of random images
  5. 		</title>
  6. 		<style type='text/css'>
  7. 			td{
  8. 				height: 174px;
  9. 				width: 157px;
  10. 				padding: 0px;
  11. 				border: 1px solid #eeeeee;
  12. 				vertical-align: bottom;
  13. 				margin-right:2px;
  14. 			}
  15. 		</style>
  16. 	</head>
  17. 	<body>
  18. 		<script language="JavaScript" type="text/javascript">
  19.  
  20. 			function getRandom (min, max){
  21. 				return min + Math.floor(Math.random() * (max - min + 1));
  22. 			}
  23.  
  24. 			d = document;
  25. 			var images = new Array()
  26. 			images[0] = 'https://www.kqimageserver.com/pwimages/new/testimages/random.jpg' ;
  27. 			images[1] = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
  28. 			images[2] = 'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
  29. 			images[3] = 'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
  30. 			images[4] = 'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
  31. 			images[5] = 'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
  32. 			images[6] = 'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
  33. 			images[7] = 'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg' ;
  34. 			images[8] = 'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg' ;
  35. 			images[9] = 'https://www.kqimageserver.com/pwimages/new/testimages/random9.jpg' ;
  36. 			images[10] = 'https://www.kqimageserver.com/pwimages/new/testimages/random10.jpg' ;
  37.  
  38. 			var selected = new Array ();
  39. 			var count = 4;
  40. 			cnt = 0;
  41.  
  42. 			for(var i = 0;i < count;i++){
  43. 				while(true){
  44. 					selected[i] = getRandom(0, images.length-1);
  45. 					isUnique = true;
  46. 					for(var j = i-1; j >= 0 ;j--){
  47. 						cnt++;
  48. 						if(selected[i] == selected[j]){
  49. 							isUnique = false;
  50. 							break;
  51. 						}
  52. 					}
  53. 					if(isUnique) break;
  54. 				}
  55. 			}
  56. 			alert(cnt);
  57.  
  58. 			for(i = 0;i < count;i++){
  59. 				d.write('<style type="text/css"> td.title'+(i+1)+' { background-image: url('+ images[selected[i]] +') } </style>');
  60. 			}
  61.  
  62.        </script>
  63.  
  64. 		<table>
  65. 			<tr>
  66. 				<td class='title1'></td>
  67. 				<td class='title2'></td>
  68. 				<td class='title3'></td>
  69. 				<td class='title4'></td>
  70. 			<tr/>	
  71.  
  72. 		</table>
  73. 	</body>
  74. </html>
Reputation Points: 10
Solved Threads: 6
Junior Poster in Training
george61 is offline Offline
59 posts
since Jul 2010
Permalink
Sep 13th, 2010
0
Re: need random images in 4 cells - can anyone help?
Wait, I andswered too soon, I will try something else
Last edited by keltoid; Sep 13th, 2010 at 5:43 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
keltoid is offline Offline
19 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: using ajax for search engine result not working?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Multiple Get Element By Id Ajax Functions





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC