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">
<!--
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");
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<img src="images/' + gallery[whichGallery][idx] + '">');
}
//-->
</script>
This is what i place in where the image schould be placed:
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.
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>
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>');
}
}
Don't quite understand the problem ... works fine for me!
What code are you using?
Did you try to execute the code of post #2?
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.
Reply With Quote
Something to try ...
Originally Posted by Stronk
Don't quite understand the problem ... works fine for me!
Bookmarks