I know I probably have to recode this, but is there a simple answer?
var ImageArr1 = new Array("images/sponsors/deanst.png","images/sponsors/vroom.png","images/sponsors/lfest.png","images/sponsors/beontrack.png");
var ImageHolder1 = document.getElementById('Rotating1');
var ImageArr2 = new Array("images/sponsors/paulmitchell.png","images/sponsors/sinnersaint.png","images/sponsors/pinksofa.png","images/sponsors/kaanaanmaa.png","images/sponsors/coyotes.png","images/sponsors/retreat.png","images/sponsors/freedomfriends.png");
var ImageHolder2 = document.getElementById('Rotating2');
var ImageArr3 = new Array("images/sponsors/nandos.png","images/sponsors/pret.png","images/sponsors/groundtoele.png","images/sponsors/focx.png");
var ImageHolder3 = document.getElementById('Rotating3');
function RotateImages(whichHolder,Start)
{
var a = eval("ImageArr"+whichHolder);
var b = eval("ImageHolder"+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",6000);
}
I know I probably have to recode this, but is there a simple answer?
I woudl do something like this to make it simpler.
With this you can add/delete images holders and the only thing you would have to edit in the javascript is add/delete a row in the picPaths and imgContainers arrays to suit. The rest of the js remains unchanged. I would also preload the images to make sure they have fully downloaded before the image rotations starts.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var picPaths = [
['num1.jpg','num2.jpg','num3.jpg'],
['num4.jpg','num5.jpg'],
['num6.jpg','num7.jpg','num8.jpg','num9.jpg']
]
//preload the images to ensure they are available when the page finishes loading
var picsO = new Array();
for(i=0; i < picPaths.length; i++){
picsO[i] = new Array();
for(j=0; j < picPaths[i].length; j++){
picsO[i][j] = new Image();
picsO[i][j].src = picPaths[i][j];
}
}
function rotateImages(imgContO){
imgContO.src = picsO[imgContO.num][imgContO.curPic].src;
imgContO.curPic = (++imgContO.curPic == picsO[imgContO.num].length)? 0 : imgContO.curPic;
setTimeout(function(){rotateImages(imgContO);},1000);
}
window.onload=function(){
var imgContainers = new Array(
document.getElementById('img1'),
document.getElementById('img2'),
document.getElementById('img3')
);
for(i=0; i < imgContainers.length; i++){
imgContainers[i].num = i;
imgContainers[i].curPic = 0;
rotateImages(imgContainers[i]);
}
}
</script>
</head>
<body>
<div>
<img id="img1" src="" alt="" />
<img id="img2" src="" alt="" />
<img id="img3" src="" alt="" />
</div>
</body>
</html>
Thanks for getting back to me, but the original code does actually work, I want to know how to add links to the images in it?
Sorry, I suppose I should have reincluded the title of the post in the body :S
I found a clumsy way of doing it here, but for some reason the images do not load/rotate until you click on the broken image link!
I know I'm out of my depth.
<script>
var currentImage = 0;
function RotateImages()
{
var a = new Array("images/sponsors/deanst.png","images/sponsors/vroom.png","images/sponsors/lfest.png","images/sponsors/beontrack.png");
var c = new Array("http://www.deanst.com/studios/", "http://www.vroomvroomvroom.co.uk/", "http://www.lfest.co.uk/", "http://www.beontrack.eu/");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl1');
var e = new Array("images/sponsors/paulmitchell.png","images/sponsors/sinnersaint.png","images/sponsors/pinksofa.png","images/sponsors/kaanaanmaa.png","images/sponsors/coyotes.png","images/sponsors/retreat.png","images/sponsors/freedomfriends.png");
var g = new Array("http://www.paul-mitchell.co.uk/", "http://www.sinnersaint.co.uk/", "http://pinksofa.com/", "http://www.kaanaanmaa.co.uk/","http://www.coyotesbar.co.uk/","http://www.retreat-wokingham.co.uk/","");
var f = document.getElementById('Rotating2');
var h = document.getElementById('imageurl2');
var i = new Array("images/sponsors/nandos.png","images/sponsors/pret.png","images/sponsors/groundtoele.png","images/sponsors/focx.png");
var k = new Array("http://www.nandos.co.uk/restaurant/soho", "http://www.pret.com/", "http://www.groundtoelevation.co.uk/", "http://www.focx.co.uk/");
var j = document.getElementById('Rotating3');
var l = document.getElementById('imageurl3');
First post would not work because you were calling on elements before they had been defined in the <body>
That was the reason for my changes in post #2.
Second attempt gives you problems for several reasons.
1. You redefine the arrays EVERY time you enter the RotateImages() function. Waste of time and resources.
2. You increment currentImage counter, but it is reset if ANY of the array lengths are exceeded.
Therefore, you will only increment counter to shortest array length.
3. You are passing the counter to be incremented as an argument to the RotateImages() function
but you do not set the counter the first time you use it just before the end of the </script>
4. The image src value is not defined in the <img> tag. Therefore, it does not get set until the function
is called with RotateImages(), but again, the first time called there is no value to increment.
I think you just got lucky that it worked at all.
Check the logic again with my points in consideration.
BTW: You should enclose your scripts between [ code] and [ /code] tags (without the spaces)
to make it easier for forum members to read, copy, test your attempts.
Links to do what? Open a new window or navigate to a new page?
Also, please wrap your code in forum tags, they are only a button click in the post editor or quick reply.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
...... I want to know how to add links to the images in it?
For ease of maintenance I would just create a 2D array for each image holder (picPaths) and the first element in the array for each image contains the url to navigate to when the image is clicked.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var picPaths = [
[
['url1','num1.jpg'],
['url2','num2.jpg'],
['url3','num3.jpg']
],
[
['url4','num4.jpg'],
['url5','num5.jpg']
],
[
['url6','num6.jpg'],
['url7','num7.jpg'],
['url8','num8.jpg'],
['url9','num9.jpg']
]
]
//preload the images to ensure they are available when the page finishes loading
var picsO = new Array();
for(i=0; i < picPaths.length; i++){
picsO[i] = new Array();
for(j=0; j < picPaths[i].length; j++){
picsO[i][j] = new Array();
picsO[i][j][1] = new Image();
picsO[i][j][1].src = picPaths[i][j][1];
picsO[i][j][0] = picPaths[i][j][0];
}
}
function rotateImages(){
for(i=0; i < imgContainers.length; i++){
imgContainers[i].src = picsO[i][imgContainers[i].curPic][1].src;
imgContainers[i].url = picsO[i][imgContainers[i].curPic][0];
imgContainers[i].onclick = function(){
window.location.href = this.url;
}
imgContainers[i].curPic = (++imgContainers[i].curPic == picsO[imgContainers[i].num].length)? 0 : imgContainers[i].curPic;
}
setTimeout(function(){rotateImages();},3000);
}
window.onload=function(){
imgContainers = new Array(
document.getElementById('img1'),
document.getElementById('img2'),
document.getElementById('img3')
);
for(i=0; i < imgContainers.length; i++){
imgContainers[i].num = i;
imgContainers[i].curPic = 0;
}
rotateImages();
}
</script>
</head>
<body>
<div>
<img id="img1" src="" alt="" />
<img id="img2" src="" alt="" />
<img id="img3" src="" alt="" />
</div>
</body>
</html>
Reply With Quote
Originally Posted by fia-1
Bookmarks