Mutliple random images with 'personal' links

Printable View

11-09-2010, 01:02 PM
Stronk

Mutliple random images with 'personal' links

Hello all,

I've been searching the net for a while, for the easiest multiple random images code and found it. But now I've also been searching for a script to link all single images to a different link (link z1.jpg to home.html, z2.jpg to contact.html, x1 to banana.html, etc.).

This is the script I'm using:

Code:

<script language="javascript">  </script>

This is what i place in where the image schould be placed:

Code:

<script language="javascript">pickImageFrom(0);</script>

Please help!
Thanks!
11-09-2010, 05:40 PM
JMRKER

Something to try ...

Here's something a little more recent than that older code:

Code:

<html> <head> <title>Random Gallery Links</title> <script type="text/javascript"> // For: http://www.webdeveloper.com/forum/showthread.php?t=238170 var imgLinks = [ // format: ['imageSource','imageLinkURL'], ['http://www.nova.edu/hpd/otm/pics/4fun/11.jpg','http://www.webdeveloper.com'], ['http://www.nova.edu/hpd/otm/pics/4fun/12.jpg','http://www.google.com'], ['http://www.nova.edu/hpd/otm/pics/4fun/13.jpg','http://www.yahoo.com'], ['http://www.nova.edu/hpd/otm/pics/4fun/14.jpg','http://www.bing.com'], ['http://www.nova.edu/hpd/otm/pics/4fun/15.jpg','http://www.codingforums.com'], ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','http://www.dreamincode.net'] // NOTE: no comma after last entry ]; function SetImage(IDS,imgPtr) { imgPtr = parseInt(imgPtr); document.getElementById(IDS).src = imgLinks[imgPtr][0]; document.getElementById(IDS).alt = imgLinks[imgPtr][1]; document.getElementById('Captions').innerHTML = imgLinks[imgPtr][1]; } function RandomLink() { var R = Math.random() * imgLinks.length; SetImage('Pics',R); } function GoToURL(URL) { document.location.href = URL; } onload = function () { RandomLink(); } </script> </head> <body> <img id="Pics" height="425" width="600" src="" alt="" onclick="GoToURL(this.alt)"><br> <span id="Captions"></span> <button onclick="RandomLink()">Random Change (for testing)</button> </body> </html>

Change the images and links in the 'imgLinks' array to match your needs.
Click on the image to go to the link URL
Remove the test button when you are finished testing.

Good Luck!
:)
11-10-2010, 01:22 AM
Stronk

Thanks a lot! I got this working.
But the problem is I need more random images, now I've got only one,...

Thanks!
11-10-2010, 12:21 PM
JMRKER

Don't quite understand the problem ... works fine for me!

Quote:

Originally Posted by Stronk

Thanks a lot! I got this working.
But the problem is I need more random images, now I've got only one,...

Thanks!

You're most welcome.
Happy to help.
Good Luck!

BTW: Why the problem? What do you mean that you "need more random images"?
Problems with the script or problems obtaining images to display?
11-10-2010, 01:26 PM
Stronk

No, you gave me the script for just one random image with links.

Also helpfull,

but this is what I needed:

Code:

<script=javascript> var gallery = new Array(); gallery[0] = new Array("z1.jpg","z2.jpg","z3.jpg","z4.jpg","z5.jpg"); gallery[1] = new Array("y1.jpg","y2.jpg","y3.jpg","y4.jpg","y5.jpg"); gallery[2] = new Array("x1.jpg","x2.jpg","x3.jpg","x4.jpg","x5.jpg", "x6.jpg"); gallery[3] = new Array("w1.jpg","w2.jpg","w3.jpg","w4.jpg","w5.jpg"); gallery[4] = new Array("v1.jpg","v2.jpg","v3.jpg","v4.jpg","v5.jpg"); var links = new Array(); links[0] = new Array("home.html","about.html",...); links[1] = ...; ... function pickImageFrom(whichGallery) { var idx = Math.floor(Math.random() * gallery[whichGallery].length); document.write('<a href="'+links[whichGallery][idx]+'"><img src="images/' + gallery[whichGallery][idx] + '"></a>'); } </script>

Thanks for the help!
11-10-2010, 01:42 PM
Nerdygeek

This code is good.

Code:

var topImages = new Array() //Random-loading images topImages[0] = 'http://www.domain.com/img1.png' // replace with names of images topImages[1] = 'http://www.domain.com/img2.png' // replace with names of images var j = 0 var p = topImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = topImages[i] } var chooseImage = Math.round(Math.random()*(p-1)); function topImage(){ if(chooseImage==0){ document.write('<a href ="http://www.domain.com/link3" rel="nofollow"><img src="'+topImages[chooseImage]+'" border=0 width=980 height=60></a>'); } else if(chooseImage==1){ document.write('<a href ="http://www.domain.com/link2" rel="nofollow"><img src="'+topImages[chooseImage]+'" border=0 width=980 height=60></a>'); } }
11-10-2010, 01:47 PM
JMRKER

Don't quite understand the problem ... works fine for me!

What code are you using? :confused:
Did you try to execute the code of post #2? :eek:

Substitute your information (which you have not provided) into this array:

Code:

var imgLinks = [ // format: ['imageSource','imageLinkURL'], ['z1.jpg','home.html'], ... continue with your assignments per format above ... ['z2.jpg','about.html'] // NOTE: no comma after last entry ];

Please explain what problems you are having ... I don't understand. :o
11-11-2010, 11:02 AM
Stronk

I solved my problem with the last code I posted.
It provides 5 random images with each 5 images.
Those 25 images now have a seperate link!

Thanks!