Random Image with Specific Links

[Sachmet]

I am fairly new with JavaScript and have been working on something for the last few days I can't seem to get to work so figure someone here has to be able to say how I might go about this or if it's possible.

I have two kinds of adverts I am doing. One type is for one URL that has several image it will be randomly rotated through. I am able to get them to work using the following.


<style type="text/css">
#advert1{width:175px; height:60px; }
#advert2{width:175px; height:60px; }
</style>

<a href="http://www.LINK 1.com/" target="_blank">
<div id="advert1"></div>
</a>

<br />

<a href="http://www.LINK 2.com/" target="_blank">
<div id="advert2"></div>
</a>

<script type="text/javascript">
var rand01 = Math.round(4*Math.random());
var advert1 = document.getElementById('advert1');
advert1.style.backgroundImage = 'url(/img-175x60-'+rand01+'.png)'

var rand02 = Math.round(3*Math.random());
var advert2 = document.getElementById('advert2');
advert2.style.backgroundImage = 'url(/img-175x60-'+rand02+'.png)';
</script>

The second type is one advert spot that randomly rotates through ads that the a specific image is suppose to have the link of a specific URL.

So like page load 1 you get image 1 and it links to site 1. Second page load you get image 5 that links with site 5. I have been able to get the images to work using a modified of the above with if statements, but I can't for the life of me figure out how to make it so the image/link are together.

I figure something like below might work, but no dice.


<style type="text/css">
#xDisp{width:175px; height:60px; }
</style>

<div id="xDisp"></div>

<script type="text/javascript">
var img = new Array(NumberOfAdverts);
img[0] = "image0.jpg";
img[1] = "image1.jpg";
img[2] = "image2.jpg";

var url = new Array(NumberOfAdverts);
url[0] = "http://link 0.com/";
url[1] = "http://link 1.com/";
url[2] = "http://link 2.com/";

var randnum = Math.round(2*Math.random());
if (randnum == 0)
{
document.images["advert"].src = img[0];
document.getElementById("xDisp").innerHTML = url[0];
}
if (randnum == 1)
{
document.images["advert"].src = img[1];
document.getElementById("xDisp").innerHTML = url[1];
}
if (randnum == 2)
{
document.images["advert"].src = img[2];
document.getElementById("xDisp").innerHTML = url[2];
}
</script>

I also thought maybe a call function...


<style type="text/css">
#xDisp{width:175px; height:60px; }
</style>

<a href="javascript:void(0)" onclick="advert()">
<div id="xDisp"></div>
</a>

<script type="text/javascript">
var randnum = Math.round(2*Math.random());
var url = new Array(NumberOfAdverts);
url[0] = "http://link 0.com/";
url[1] = "http://link 1.com/";
url[2] = "http://link 2.com/";

function advert()
{
document.getElementById("xDisp").innerHTML = url[randnum];
if (randnum == 0)
{
var xDisp = document.getElementById('xDisp');
xDisp.style.backgroundImage = 'url(/img-175x60-0.png)'
}
if (randnum == 1)
{
var xDisp = document.getElementById('xDisp');
xDisp.style.backgroundImage = 'url(/img-175x60-1.png)'
}
if (randnum == 2)
{
var xDisp = document.getElementById('xDisp');
xDisp.style.backgroundImage = 'url(/img-175x60-2.png)'
}
}
</script>

I just really can't seem to get anything to work so any help would be great. This is going to be updated over a period time as adverts are added and I would also like it to be light weight. Something I could figure out how to update (from my ability of the codes above should show you my newbishness level of JavaScript).

[jscheuer1]

You want something like:


<a id="myLink" href="somedefaultlink.com"><img id="myImage" src="somedefault.jpg"></a>
<script type="text/javascript">
(function(){
var ims = ['some_0.jpg', 'some_1.jpg', 'some_2.jpg', 'some_3.jpg'],
thelinks = ['some_0.com', 'some_1.com', 'some_2.com', 'some_3.com'],
l = document.getElementById('myLink'), p = document.getElementById('myImage'),
r = Math.floor(ims.length * Math.random());
l.href = thelinks[r];
p.src = ims[r];
})();
</script>

The names of the images and links are unimportant. They don't need numbers. There must be an equal amount of each. Each image will be linked to the link that occupies its corresponding position in the thelinks array.

[Sachmet]

Thank you so much. It worked great. Messed up the first thing, but I just made more functions specific for those and it works great. Thank you.