Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 191
  • Last Modified:

Random rolling images with image specific links

Hi all,

Easiest way to describe this is to think of it as displaying ads on a page.

I need to be able to randomly display 2 images with thier specific links (the links will always be the same for any given image.
At the moment I have:

<script language="JavaScript">
var theImages1 = new Array() // do not change this
theImages1[0] = 'http://www.mydomain.com/common/images/rand01.gif'
theImages1[1] = 'http://www.mydomain.com/common/images/rand02.gif'
var j = 0
var p = theImages1.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages1[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage1(){
document.write('<img src="'+theImages1[whichImage]+'">');
}
</script>

Which is ok but doesn't do any linking and in order to make sure the same image is not displayed twice I have to do two lots of the above with independant 'image lists' e.g.

<script language="JavaScript">
var theImages1 = new Array() // do not change this
theImages1[0] = 'http://www.mydomain.com/common/images/rand01.gif'
theImages1[1] = 'http://www.mydomain.com/common/images/rand02.gif'
var j = 0
var p = theImages1.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages1[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage1(){
document.write('<img src="'+theImages1[whichImage]+'">');
}
</script>
<script language="JavaScript">
var theImages2 = new Array() // do not change this
theImages2[0] = 'http://www.mydomain.com/common/images/rand03.gif'
theImages2[1] = 'http://www.mydomain.com/common/images/rand04.gif'
var j = 0
var p = theImages2.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages2[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage2(){
document.write('<img src="'+theImages2[whichImage]+'">');
}
</script>

An all in one solution is desired.. cheers in advance.
0
phreak7t7
Asked:
phreak7t7
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
<script language="JavaScript">
var theImages = new Array() // do not change this
var theLinks = new Array() // do not change this
theImages[0] = 'http://www.mydomain.com/common/images/rand01.gif'
theImages[1] = 'http://www.mydomain.com/common/images/rand02.gif'
theImages[2] = 'http://www.mydomain.com/common/images/rand03.gif'
theImages[3] = 'http://www.mydomain.com/common/images/rand04.gif'
theLinks[0] = 'http://www.mydomain.com/common/images/rand01.html'
theLinks[1] = 'http://www.mydomain.com/common/images/rand02.html'
theLinks[2] = 'http://www.mydomain.com/common/images/rand03.html'
theLinks[3] = 'http://www.mydomain.com/common/images/rand04.html'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage1 = Math.round(Math.random()*(p-1));
var whichImage2 = whichImage1;
while (whichImage2 == whichImage1) {
  whichImage2 = Math.round(Math.random()*(p-1));
}
document.write('<a href="'+theLinks[whichImage1]+'"><img src="'+theImages[whichImage1]+'"></a>');
document.write('<a href="'+theLinks[whichImage2]+'"><img src="'+theImages[whichImage2]+'"></a>');

</script>
0
 
Michel PlungjanIT ExpertCommented:
and you can remove the
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}

or move it after the calculation so you can just prebuffer the chosen images
0
 
phreak7t7Author Commented:
The bonus question :o) : is it possible to make the images with links randomly change in page say every 5 seconds as an example as apposed to just when the page loads?
0
 
Michel PlungjanIT ExpertCommented:
Yes


<script language="JavaScript">
var theImages = new Array() // do not change this
var theLinks = new Array() // do not change this
theImages[0] = 'http://www.mydomain.com/common/images/rand01.gif'
theImages[1] = 'http://www.mydomain.com/common/images/rand02.gif'
theImages[2] = 'http://www.mydomain.com/common/images/rand03.gif'
theImages[3] = 'http://www.mydomain.com/common/images/rand04.gif'
theLinks[0] = 'http://www.mydomain.com/common/images/rand01.html'
theLinks[1] = 'http://www.mydomain.com/common/images/rand02.html'
theLinks[2] = 'http://www.mydomain.com/common/images/rand03.html'
theLinks[3] = 'http://www.mydomain.com/common/images/rand04.html'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
function changeImage() {
  var whichImage1 = Math.round(Math.random()*(p-1));
  var whichImage2 = whichImage1;
  while (whichImage2 == whichImage1) {
    whichImage2 = Math.round(Math.random()*(p-1));
  }
  document.getElementById('imageDiv1').innerHTML='<a href="'+theLinks[whichImage1]+'"><img src="'+theImages[whichImage1]+'"></a>';
  document.getElementById('imageDiv2').innerHTML='<a href="'+theLinks[whichImage2]+'"><img src="'+theImages[whichImage2]+'"></a>';
}

</script>
</head>
<body onLoad="changeImage(); setInterval('changeImage()',5000)">
<div id="imageDiv1"></div><div id="imageDiv2"></div>
0
 
Michel PlungjanIT ExpertCommented:
Any reason for the "B" grade???
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now