Member Avatar for jonsan32

I'm trying to get random images to display onto four different cells with their corresponding links in place. All that's happenning is one random image is chosen and displayed throughout. Is there a way to pull 4 images from the given list and display them randomly instead? Thanks a bunch for any help provided.

<script language="JavaScript">
<!--

/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com) 
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20classic.png"
myimages[2]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[3]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/hopla.png"
myimages[4]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/jam%20night.png"
myimages[5]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/jamcamp.png"
myimages[6]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/mailing%20list.png"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.javascriptkit.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"
imagelinks[6]="http://www.cnn.com"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<table><tr><td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a></td><td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a></td><td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a></td><td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a></td></tr></table>')
}
random_imglink()
//-->
</script>
  • 4 Contributors
  • 18 Replies
  • 413 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jonsan32
Member Avatar for JorgeM

you'll need to use a loop in your code in the example you provided, the value of ry is calculated one time and that same value is used for the four images.

Member Avatar for jonsan32

Yea, I suck at coding. I get that the ry has to change, but I don't know what to change it to. And I'm sure I would have to add stuff before that as well, but I have no clue where to start. Thank you for getting back to me, however. I've searched this topic everywhere and have yet to find anyone successfully implementing it.

Member Avatar for JorgeM

Ok, not a problem. Here is a working example... I removed the link information just so its easier to read for anyone else that comes across this thread. Keep in mind that the same image can come up twice since you are showing 4 images from a total of 6. the likelyhood is that the same iamge will come up more than once.

<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()

myimages[1]="#"
myimages[2]="#"
myimages[3]="#" 
myimages[4]="#"   
myimages[5]="#"  
myimages[6]="#"

var imagelinks=new Array()
imagelinks[1]="#"
imagelinks[2]="#"
imagelinks[3]="#"
imagelinks[4]="#"
imagelinks[5]="#"
imagelinks[6]="#"
var ry
document.write('<table><tr>')
for (i=0; i<4; i++) 
 {
  ry=Math.floor(Math.random()*myimages.length)
  if (ry==0)
      {
      ry=1
      }  
  document.write('<td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a></td>')
  }
  document.write('</tr></table>')
}
random_imglink()
//-->
</script>
Edited by JorgeM
Member Avatar for jonsan32

Fair enough. I like it. I was originally searching for a script that would produce 4 unique results each time... kinda like a lottery drawing. But even when I settled for having it this way, I found I couldn't do it. Thanks for helping me out with this. I appreciate it.

Member Avatar for JorgeM

Ok.. with not too much additional coding you could keep track of the results as you go through the loops in another array, then you would just keep checking this array and if the number has been choosing, pick another random number.

use this for now, give it a try and just ask for help if you get stuck.

Member Avatar for Taywin

Wouldn't this part

ry=Math.floor(Math.random()*myimages.length)
if (ry==0) {
  ry=1
}

is equivalent to...

ry=Math.ceil(Math.random()*myimages.length)

Edit:
Wait... My bad... The former gives higher propability (twice as high as others) to the first image (1) and not select the last image (6), but the latter gives equal propability to each image including the last image.

Further more, if you want all different 4 images at all time, you could add one array variable holding all number of index of image array, and then shuffle it as many times as you like. Because there are only 6 elements here, I would shuffle it around 1,500 times or less (should do at least 180 times though). Then use only the first 4 to display.

var ry
// could change to dynamically create regarding myimages array
var nonSelected = [1,2,3,4,5,6]
var pos1, pos2, tmp
for (var i=0; i<1500; i++) {  // shuffle 1500 times
  pos1 = Math.floor(Math.random()*myimages.length)  // random position1
  pos2 = Math.floor(Math.random()*myimages.length)  // random position2
  // swap the element
  tmp = nonSelected[pos1]
  nonSelected[pos1] = nonSelected[pos2]
  nonSelected[pos2] = tmp
}
document.write('<table><tr>')
for (i=0; i<4; i++) {
  document.write('<td><a href='+'"'+imagelinks[nonSelected[i]]+'"'+'><img src="'+myimages[nonSelected[i]]+'" border=0></a></td>')
  }
  document.write('</tr></table>')
}
Edited by Taywin
Member Avatar for jonsan32

Taywin, that's interesting. How would you apply that to my code and layout below. I noticed you changed the table layout to include nonselected. Could that work with what I have below? Thanks you, btw.

Also, note that I'm repeating images to increase their particular likelihood of appearance, as those are more important than the others.

<br /><br /><div align=center><script type="text/javascript" src="http://dl.dropbox.com/u/5739741/gradualfader.js">
</script>


<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()
myimages[1]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/photos.png"
myimages[2]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/past%20champs.png"   
myimages[3]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/sched.png"  
myimages[4]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/mailing%20list.png"
myimages[5]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/standins.png"   
myimages[6]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/Late%20Fee%20Payments.png"
myimages[7]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/monster%20bash.png"
myimages[8]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/monster%20bash.png"
myimages[9]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/monster%20bash.png"
myimages[10]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[11]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[12]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[13]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/protect.png" 
myimages[14]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/protect.png" 
myimages[15]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/protect.png" 



var imagelinks=new Array()
imagelinks[1]="http://www.jamball.com/2010/10/photos.html"
imagelinks[2]="http://www.jamball.com/2011/02/past-champions.html"
imagelinks[3]="http://www.jamball.com/2010/10/jam-schedules.html"
imagelinks[4]="http://www.jamball.com/2010/10/newsletters.html"
imagelinks[5]="http://www.jamball.com/2010/10/jam-standings.html"
imagelinks[6]="http://form.jotformpro.com/form/21875228167965"
imagelinks[7]="http://www.jamtournaments.com/2012/08/halloween-bash-october-26-28-2012.html"
imagelinks[8]="http://www.jamtournaments.com/2012/08/halloween-bash-october-26-28-2012.html"
imagelinks[9]="http://www.jamtournaments.com/2012/08/halloween-bash-october-26-28-2012.html"
imagelinks[10]="http://form.jotformpro.com/form/22745776115963"
imagelinks[11]="http://form.jotformpro.com/form/22745776115963"
imagelinks[12]="http://form.jotformpro.com/form/22745776115963"
imagelinks[13]="http://www.jamball.com/2012/05/protect-paint.html"
imagelinks[14]="http://www.jamball.com/2012/05/protect-paint.html"
imagelinks[15]="http://www.jamball.com/2012/05/protect-paint.html"

var ry
document.write('<table width=920><tr>')
for (i=0; i<4; i++) 
 {
  ry=Math.floor(Math.random()*myimages.length)
  if (ry==0)
      {
      ry=1
      }  
  document.write('<td><a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0 class="gradualfader"></a></td>')
  }
  document.write('</tr></table>')
}
random_imglink()
//-->
</script> 

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script> </div>
Edited by jonsan32
Member Avatar for Taywin

From your current line 44 down to line 56, it could be as follows...

var ry
var nonSelected = new Array()  // declare an empty array
// now dynamically create the array
for (var i=0; i<myimages.length; i++) { nonSelected[i] = i+1 }
var pos1, pos2, tmp
for (var i=0; i<2000; i++) {  // shuffle 1500 times
  pos1 = Math.floor(Math.random()*myimages.length)  // random position1
  pos2 = Math.floor(Math.random()*myimages.length)  // random position2
  // swap the element
  tmp = nonSelected[pos1]
  nonSelected[pos1] = nonSelected[pos2]
  nonSelected[pos2] = tmp
}
document.write('<table><tr>')
for (var i=0; i<4; i++) {
  document.write('<td><a href='+'"'+imagelinks[nonSelected[i]]+'"'+'><img src="'+myimages[nonSelected[i]]+'" border=0></a></td>')
  }
  document.write('</tr></table>')
}
Edited by Taywin
Member Avatar for JorgeM

hello taywin,

Can you explain the purpose of the code that you presented? I'm not understanding the reason for the "shuffling". thanks.

Member Avatar for jonsan32

That's pretty cool how it never repeats now. But is there any reason I get one undefined value every few shuffles. Did I mess it up somewhere?

<br /><br /><div align=center><script type="text/javascript" src="http://dl.dropbox.com/u/5739741/gradualfader.js">
</script>
<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()
myimages[1]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/photos.png"
myimages[2]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/past%20champs.png"   
myimages[3]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/sched.png"  
myimages[4]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/mailing%20list.png"
myimages[5]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/standins.png"   
myimages[6]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/Late%20Fee%20Payments.png"
myimages[7]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/monster%20bash.png"
myimages[8]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[9]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/protect.png" 

var imagelinks=new Array()
imagelinks[1]="http://www.jamball.com/2010/10/photos.html"
imagelinks[2]="http://www.jamball.com/2011/02/past-champions.html"
imagelinks[3]="http://www.jamball.com/2010/10/jam-schedules.html"
imagelinks[4]="http://www.jamball.com/2010/10/newsletters.html"
imagelinks[5]="http://www.jamball.com/2010/10/jam-standings.html"
imagelinks[6]="http://form.jotformpro.com/form/21875228167965"
imagelinks[7]="http://www.jamtournaments.com/2012/08/halloween-bash-october-26-28-2012.html"
imagelinks[8]="http://form.jotformpro.com/form/22745776115963"
imagelinks[9]="http://www.jamball.com/2012/05/protect-paint.html"


var ry
var nonSelected = new Array()  // declare an empty array
// now dynamically create the array
for (var i=0; i<myimages.length; i++) { nonSelected[i] = i+1 }
var pos1, pos2, tmp
for (var i=0; i<2000; i++) {  // shuffle 1500 times
  pos1 = Math.floor(Math.random()*myimages.length)  // random position1
  pos2 = Math.floor(Math.random()*myimages.length)  // random position2
  // swap the element
  tmp = nonSelected[pos1]
  nonSelected[pos1] = nonSelected[pos2]
  nonSelected[pos2] = tmp
}
document.write('<table><tr>')
for (var i=0; i<4; i++) {
  document.write('<td><a href='+'"'+imagelinks[nonSelected[i]]+'"'+'><img src="'+myimages[nonSelected[i]]+'" border=0 class="gradualfader"></a></td>')
  }
  document.write('</tr></table>')
}


random_imglink()
//-->
</script>
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script> </div>
Member Avatar for Taywin

@JorgM, it is another technique to do random. Let's think of an array size n. The shuffling is to swap 2 random elements. So if you do enough shuffling/swapping times, so that each element would have the same chance of being selected to be swapped. At the end, each element has the same random chance to be at any of the position in the array. Therefore, after the shuffling, when pick any of the element in the array, each element would have the same (or almost) chance of being picked (if not all are being picked). It is one of many ways to randoms a number from a set of number without picking the same number.

@jonscan32, I didn't realize that your array is a bit off. Please add...

myimages[0]=""
// and
imagelinks[0]=""

The reason is that the array size is declared as size of 9 because the indices run through 1 to 9. The loop expected that the array is properly created (starts index from 0). Sorry for not looking at it careful enough.

Edited by Taywin
Member Avatar for JorgeM

@Taywin, i see now. thanks.

Member Avatar for jonsan32

So weird. I'm guessing it's me. But even with added, I still get one missing every once in a while. I'll keep playing around with it, tho.

<br /><br /><div align=center><script type="text/javascript" src="http://dl.dropbox.com/u/5739741/gradualfader.js">
</script>
<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()
myimages[0]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/photos.png"
myimages[1]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/photos.png"
myimages[2]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/past%20champs.png"   
myimages[3]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/sched.png"  
myimages[4]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/mailing%20list.png"
myimages[5]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/standins.png"   
myimages[6]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/Late%20Fee%20Payments.png"
myimages[7]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/monster%20bash.png"
myimages[8]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/allstar%20clinic.png"
myimages[9]="http://dl.dropbox.com/u/5739741/jam%20mascot/Main%20Page%20Buttons/protect.png" 
var imagelinks=new Array()
imagelinks[0]="http://www.jamball.com/2010/10/photos.html"
imagelinks[1]="http://www.jamball.com/2010/10/photos.html"
imagelinks[2]="http://www.jamball.com/2011/02/past-champions.html"
imagelinks[3]="http://www.jamball.com/2010/10/jam-schedules.html"
imagelinks[4]="http://www.jamball.com/2010/10/newsletters.html"
imagelinks[5]="http://www.jamball.com/2010/10/jam-standings.html"
imagelinks[6]="http://form.jotformpro.com/form/21875228167965"
imagelinks[7]="http://www.jamtournaments.com/2012/08/halloween-bash-october-26-28-2012.html"
imagelinks[8]="http://form.jotformpro.com/form/22745776115963"
imagelinks[9]="http://www.jamball.com/2012/05/protect-paint.html"
var ry
var nonSelected = new Array()  // declare an empty array
// now dynamically create the array
for (var i=0; i<myimages.length; i++) { nonSelected[i] = i+1 }
var pos1, pos2, tmp
for (var i=0; i<2000; i++) {  // shuffle 1500 times
  pos1 = Math.floor(Math.random()*myimages.length)  // random position1
  pos2 = Math.floor(Math.random()*myimages.length)  // random position2
  // swap the element
  tmp = nonSelected[pos1]
  nonSelected[pos1] = nonSelected[pos2]
  nonSelected[pos2] = tmp
}
document.write('<table><tr>')
for (var i=0; i<4; i++) {
  document.write('<td><a href='+'"'+imagelinks[nonSelected[i]]+'"'+'><img src="'+myimages[nonSelected[i]]+'" border=0 class="gradualfader"></a></td>') 
  }
  document.write('</tr></table>')
}
random_imglink()
//-->
</script>
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script> </div>
Member Avatar for Airshow

Hi Jonsan,

Hope you're keeping well.

Are thres guys looking after you?

Airshow

Member Avatar for jonsan32

Hey Airshow!!! Nice to hear from you again. I'm doing well, and these guys are great. I've already got Jorge's first suggestion implemented and running, and that's good enough. I'd like to replace it with Taywin's option where each is unique image/link is unique, but I still keep getting one undefined cell every few shuffles. If you can offer any advice, that would be awesome. If not, it's all good. You've already helped me more than anyone on the internet EVER!

Thanks as always.

Member Avatar for Taywin

Oops, I'm sorry because it wasn't the fix. I shouldn't try to answer before I go to bed... :(

Anyway, the fix should actually be at the dynamic array creation...

for (var i=1; i<myimages.length; i++) { nonSelected[i-1] = i }

also in order to match that, the part in random position should be as follows.

pos1 = Math.floor(Math.random()*nonSelected.length) // random position1
pos2 = Math.floor(Math.random()*nonSelected.length) // random position2
Edited by Taywin
Member Avatar for Airshow

Jonsan, You're in safe hands. I won't interfere.

Airshow

Member Avatar for jonsan32

PERFECTION! Thank you, everyone! This place is seriously a life-saver.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.