...

View Full Version : Random Image Generator With Links in a Table Cell



turner20
06-25-2012, 02:36 AM
Hi, i'm trying to place two random images that change on page refresh. They must be positioned side-by-side, each image has a different external link, and the same two images must not be shown at the same time.

So far, after trawling through countless sites, i have managed to put together the following javascript that will pull in a single random image from my picture library in sharepoint with each image' external link working correctly; my plan was to create a table with one row and two cells and call the script from each cell so they are positioned correctly - would this be the best way to go (if so how would i call the script from multiple table cells??) or should i also create the table in the script also?? or is there a better way to achieve all this??

Any help would be greatly appreciated.



function random_imglink(){
var myimages=new Array()

//specify random images below.

myimages[1]="/StaffSportShots/exployee1.jpg"
myimages[2]="/StaffSportShots/exployee2.jpg"
myimages[3]="/StaffSportShots/exployee3.jpg"
myimages[4]="/StaffSportShots/exployee4.jpg"
myimages[5]="/StaffSportShots/exployee5.jpg"
myimages[6]="/StaffSportShots/exployee6.jpg"
myimages[7]="/StaffSportShots/exployee7.jpg"
myimages[8]="/StaffSportShots/exployee8.jpg"
myimages[9]="/StaffSportShots/exployee9.jpg"
myimages[10]="/StaffSportShots/exployee10.jpg"

//specify corresponding links below

var imagelinks=new Array()
imagelinks[1]="http://domain.com/profile/employee1/"
imagelinks[2]="http://domain.com/profile/employee2/"
imagelinks[3]="http://domain.com/profile/employee3/"
imagelinks[4]="http://domain.com/profile/employee4/"
imagelinks[5]="http://domain.com/profile/employee5/"
imagelinks[6]="http://domain.com/profile/employee6/"
imagelinks[7]="http://domain.com/profile/employee7/"
imagelinks[8]="http://domain.com/profile/employee8/"
imagelinks[9]="http://domain.com/profile/employee9/"
imagelinks[10]="http://domain.com/profile/employee10/"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->

Old Pedant
06-25-2012, 03:57 AM
Try to avoid using document.write. It's really not needed.

As far as the HTML is concerned: <table>s are much frowned on nowadays. Most designers would use CSS styles to position things.

But, yes, you could use a simple <table>, as you described. I'll do that here, but you should look into better ways.



<html>
<body>
...
<table>
<tr>
<td>
<a id="LINK1"><img id="IMG1" style="border: none;"></a>
</td>
<td>
<a id="LINK2"><img id="IMG2" style="border: none;"></a>
</td>
</table>
...
<script type="text/javascript">
var myImages = [
"/StaffSportShots/exployee1.jpg",
"/StaffSportShots/exployee2.jpg",
...
"/StaffSportShots/exployee10.jpg"
];
var imagelinks = [
"http://domain.com/profile/employee1/",
"http://domain.com/profile/employee2/",
...
"http://domain.com/profile/employee10/"
];
var rnum = Math.floor( Math.random() * myImages.length );
document.getElementById("LINK1").href = imagelinks[rnum];
document.getElementById("IMG1").src = myImages[rnum];

var r1 = rnum;
while ( rnum = r1 ) // ensure no duplicate
{
rnum = Math.floor( Math.random() * myImages.length );
}
document.getElementById("LINK2").href = imagelinks[rnum];
document.getElementById("IMG2").src = myImages[rnum];
</script>
</body>
</html>

turner20
06-25-2012, 07:23 AM
Thank you for the quick response!

The script hangs my browser (IE9), i then get a warning that the script is taking too long and when i stop it the first image (in the left cell) displays fine but the second image shows as a picture icon (not a missing red cross).

The only part of the code i changed was the image location and links. Any ideas what it could be?

Philip M
06-25-2012, 08:27 AM
while ( rnum == r1 ) // ensure no duplicate

Old Pedant
06-25-2012, 08:41 PM
Oh, crap. So sorry, turner. What a place to make a typo like that. Philip's eyes are better than mine.

turner20
06-26-2012, 04:54 AM
Absolutely no problem at all Old Pedant. Thank you both for your quick responses and help, the script is working perfectly now.

Just one last thing (hope i'm not pushing my luck ;) - when an image is clicked the link is opening in the same browser window; is there a way to force it to open in a new browser window?

Are you able to recommend any good online resources / books for learning JavaScript??

Philip M
06-26-2012, 07:36 AM
Absolutely no problem at all Old Pedant. Thank you both for your quick responses and help, the script is working perfectly now.

Just one last thing (hope i'm not pushing my luck ;) - when an image is clicked the link is opening in the same browser window; is there a way to force it to open in a new browser window?

Are you able to recommend any good online resources / books for learning JavaScript??

Whether a page opens in a new window, a new tab or the same window is entirely under the control of the user. You are not able to force it.

For resources/books try using the search feature of the forum - the question has often been asked before. w3schools is often considered a good resource, even though it is not entirely up-to-date in parts. Many of the objections which are sometimes raised about it are rather pedantic in nature.

turner20
07-03-2012, 08:09 AM
Hi again, i've been trying to extend the script to work with 4 and 6 images, however i'm struggling to find a away to make sure no duplicates occur - i presume this line just needs additions ??
var r1 = rnum;
while ( rnum = r1 ) // ensure no duplicate

i've tried creating a var r2 and adding in the previous r# values for each but i get duplicates. Can someone point me in the right direction please?

Philip M
07-03-2012, 08:29 AM
Hi again, i've been trying to extend the script to work with 4 and 6 images, however i'm struggling to find a away to make sure no duplicates occur - i presume this line just needs additions ??
var r1 = rnum;
while ( rnum = r1 ) // ensure no duplicate

i've tried creating a var r2 and adding in the previous r# values for each but i get duplicates. Can someone point me in the right direction please?

One more time:-

while ( rnum == r1 ) { // ensure no duplicate

A test script:-


<script type = "text/javascript">

var arr = []; // to store the results
var rnum = 0;
var r1 = rnum;
var len = 6; // images array length

for (var i =0; i<20; i++) {
while ( rnum == r1 ) { // ensure no duplicate
rnum = Math.floor( Math.random() * len );
arr[i] = rnum;
}
r1=rnum;
}

alert (arr); // no consecutive repeats
</script>

turner20
07-03-2012, 09:47 AM
Sorry my typo, i did have the "==" in the script already. What i'm struggling to get my head round is where to place code within the existing script when i need to extend the number of instances. For example, taking OldPendant' code above that allows me to have two randomised images in the table that are not duplicated; if i want to add two further images (makin a total of 4) i obviously create two more cells in the table, and 2 elementbyid for each; do i then need to replicate the "rnum = math.floor..." for each also? The test script you detailed seems to be alittle different to the example first given, i'm trying to figure out the sequence of events to make sense of it and where they are in the script. Sorry, learning as i go along on this....


<table>
<tr>
<td>
<a id="LINK1"><img id="IMG1" style="border: none;"></a>
</td>
<td>
<a id="LINK2"><img id="IMG2" style="border: none;"></a>
</td>
<td>
<a id="LINK3"><img id="IMG3" style="border: none;"></a>
</td>
<td>
<a id="LINK4"><img id="IMG4" style="border: none;"></a>
</td>
</table>
...
<script type="text/javascript">
var myImages = [
"/StaffSportShots/exployee1.jpg",
"/StaffSportShots/exployee2.jpg",
...
"/StaffSportShots/exployee10.jpg"
];
var imagelinks = [
"http://domain.com/profile/employee1/",
"http://domain.com/profile/employee2/",
...
"http://domain.com/profile/employee10/"
];
var rnum = Math.floor( Math.random() * myImages.length );
document.getElementById("LINK1").href = imagelinks[rnum];
document.getElementById("IMG1").src = myImages[rnum];

var r1 = rnum;
while ( rnum == r1 ) { // ensure no duplicate
{
rnum = Math.floor( Math.random() * myImages.length );
}
document.getElementById("LINK2").href = imagelinks[rnum];
document.getElementById("IMG2").src = myImages[rnum];
{
rnum = Math.floor( Math.random() * myImages.length );
}
document.getElementById("LINK3").href = imagelinks[rnum];
document.getElementById("IMG3").src = myImages[rnum];
{
rnum = Math.floor( Math.random() * myImages.length );
}
document.getElementById("LINK4").href = imagelinks[rnum];
document.getElementById("IMG4").src = myImages[rnum];
</script>

Philip M
07-03-2012, 12:59 PM
If you want to display several (non-repeating) images, you should shuffle the images array at the outset and then show images[0], images[1], images[2] and images[3]. Note that the index of an array starts at 0.

For simplicity you can shuffle the indices:-


<script type = "text/javascript">

var myimages=new Array()

//specify random images below.

myimages[1]="/StaffSportShots/exployee1.jpg"
myimages[2]="/StaffSportShots/exployee2.jpg"
myimages[3]="/StaffSportShots/exployee3.jpg"
myimages[4]="/StaffSportShots/exployee4.jpg"
myimages[5]="/StaffSportShots/exployee5.jpg"
myimages[6]="/StaffSportShots/exployee6.jpg"
myimages[7]="/StaffSportShots/exployee7.jpg"
myimages[8]="/StaffSportShots/exployee8.jpg"
myimages[9]="/StaffSportShots/exployee9.jpg"
myimages[10]="/StaffSportShots/exployee10.jpg"

//specify corresponding links below

var imagelinks=new Array()
imagelinks[1]="http://domain.com/profile/employee1/"
imagelinks[2]="http://domain.com/profile/employee2/"
imagelinks[3]="http://domain.com/profile/employee3/"
imagelinks[4]="http://domain.com/profile/employee4/"
imagelinks[5]="http://domain.com/profile/employee5/"
imagelinks[6]="http://domain.com/profile/employee6/"
imagelinks[7]="http://domain.com/profile/employee7/"
imagelinks[8]="http://domain.com/profile/employee8/"
imagelinks[9]="http://domain.com/profile/employee9/"
imagelinks[10]="http://domain.com/profile/employee10/"

var Array = [1,2,3,4,5,6,7,8,9,10];

function shuffle(Arr){
var NewArr = Arr.slice(0);
var len = NewArr.length;
while (len>0) {
NewArr.push(NewArr.splice(Math.floor(Math.random()*len),1)[0]);
len--;
}
return NewArr;
}

var shuffled = shuffle(Array);
alert (shuffled);; // for testing
var index = shuffled[0]; // first image
alert (myimages[index]);
alert (imagelinks[index]);

// to place the image and link in the page
//document.getElementById("LINK1").href = imagelinks[index];
//document.getElementById("IMG1").src = myimages[index];

var index = shuffled[1]; // second image
alert (myimages[index]);
alert (imagelinks[index]);

var index = shuffled[2]; // third image
alert (myimages[index]);
alert (imagelinks[index]);

var index = shuffled[3]; // fourth image
alert (myimages[index]);
alert (imagelinks[index]);

</script>

turner20
07-08-2012, 11:53 PM
Thanks Philip, that worked great and helped me understand the sequence. Thanks for your time.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum