Image Array Onclick Event-addition to script

Hi

A few weeks back a kind Expert provided me with the below script - it loads an array of images (pre loading the images that aren't on display) and rotates between these images every 20 seconds. It works great! However, I have since realised it would me a nice piece of functionality if the user could click on the image displayed and be directed to a particular page depending on which image was displayed at the time. I was wonder how would I add this piece of functionality?

Thanks in advance for all your help and support.

Thanks & Best Regards,



code
-----
<html>
<head>
<title>L- ads</title>
</head>
<body>
<img src="tezt0.jpg" id="imag">
<script language="JavaScript">
aig=new Array ('tezt0.jpg','tezt1.jpg','tezt2.jpg','tezt3.jpg');
ig=new Array ();
i=1; y=1;
function show() {
if(i==aig.length) {i=0; y=0;}
document.getElementById('imag').src=aig[i];
i++;
if(y){
ig[i]=new Image();
ig[i].src=aig[i];
}
window.setTimeout('show()',2000);
}
ig[i]=new Image();
ig[i].src=aig[i];
window.setTimeout('show()',2000);
</script>
</body>
</html>
bowemcAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
Like this:

<html>
<head>
<title>L- ads</title>
</head>
<body>
<img src="tezt0.jpg" id="imag">
<script language="JavaScript">
aig=[
['tezt0.jpg','/link0.htm'],
['tezt1.jpg','/link1.htm'],
['tezt2.jpg','/link2.htm'],
['tezt3.jpg','/link3.htm']];

ig=new Array ();
i=1; y=1;
function show() {
  if(i==aig.length) {i=0; y=0;}
  document.images.imag.src=aig[i][0];
  document.images.imag.lnk=aig[i][1];
  document.images.imag.onclick=function(){alert(this.lnk);location=this.lnl};
  i++;
  if(y){
    ig[i]=new Image();
    ig[i].src=aig[i][0];
  }
  window.setTimeout('show()',2000);
}
ig[i]=new Image();
ig[i].src=aig[i];
window.setTimeout('show()',2000);
</script>
</body>
</html>

ZvonkoSystems architectCommented:
Sorry, typo.
Last char in this line has to be an k
  document.images.imag.onclick=function(){alert(this.lnk);location=this.lnk};

And of course remove the alert() after test.

ZvonkoSystems architectCommented:
Check please this:

<html>
<head>
<title>L- ads</title>
<script language="JavaScript">
aig=[
['tezt0.jpg','/link0.htm'],
['tezt1.jpg','/link1.htm'],
['tezt2.jpg','/link2.htm'],
['tezt3.jpg','/link3.htm']];

ig=new Array ();
i=0; y=1;
function show() {
  document.images.imag.src=aig[i][0];
  document.images.imag.lnk=aig[i][1];
  document.images.imag.onclick=function(){alert(this.lnk);location=this.lnk};
  i++;
  if(i>=aig.length) {i=0; y=0;}
  if(y){
    ig[i]=new Image();
    ig[i].src=aig[i][0];
  }
  window.setTimeout('show()',2000);
}
</script>
</head>
<body onLoad="show()">
<img src="tezt0.jpg" id="imag">
</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

bowemcAuthor Commented:
Sorry, have you tested the last post? If doesn't seem to do anything for me? It doesn't even rotate between images

Thanks
bowemcAuthor Commented:
i'm trying the below but to no avail - only tezt01.jpg is appearing and staying static

<html>
<head>
<title>L- ads</title>
<script language="JavaScript">
aig=[
['tezt01.jpg','www.google.com'],
['tezt02.jpg','www.yahoo.com'],
['tezt02.jpg','/link2.htm'],

ig=new Array ();
i=0; y=1;
function show() {
  document.images.imag.src=aig[i][0];
  document.images.imag.lnk=aig[i][1];
  document.images.imag.onclick=function(){alert(this.lnk);location=this.lnk};
  i++;
  if(i>=aig.length) {i=0; y=0;}
  if(y){
    ig[i]=new Image();
    ig[i].src=aig[i][0];
  }
  window.setTimeout('show()',200);
}
</script>
</head>
<body onLoad="show()">
<img src="tezt01.jpg" id="imag">
</body>
</html>
ZvonkoSystems architectCommented:
You have a syntax error on upper page.
The aig Array ends with a coma instead an ]

ZvonkoSystems architectCommented:
Last array line looks like this:

['tezt02.jpg','/link2.htm']]

bowemcAuthor Commented:
Ok it works....but....only the first image will take me to google....the second will not take me to yahoo. Also how do i get a hand mouse pointer to appear over the picture so the user knows its a hyper link?

Thanks again
ZvonkoSystems architectCommented:
You are welcome.

<img src="tezt0.jpg" id="imag" style="cursor:hand;">
bowemcAuthor Commented:
>> <img src="tezt0.jpg" id="imag" style="cursor:hand;">

this did not work???
bowemcAuthor Commented:
I just googled it and noted - you way workd in IE....is there any cross browser way of doing it - at least for Firefox and IE??

Thanks
bowemcAuthor Commented:
sorted it - style="cursor: pointer; cursor:hand;">
ZvonkoSystems architectCommented:
<head>
<title>L- ads</title>
<script language="JavaScript">
aig=[
['tezt0.jpg','/link0.htm'],
['tezt1.jpg','/link1.htm'],
['tezt2.jpg','/link2.htm'],
['tezt3.jpg','/link3.htm']];
var theLink;
ig=new Array ();
i=0; y=1;
function show() {
  document.images.imag.src=aig[i][0];
  theLink.href=aig[i][1];
  i++;
  if(i>=aig.length) {i=0; y=0;}
  if(y){
    ig[i]=new Image();
    ig[i].src=aig[i][0];
  }
  window.setTimeout('show()',2000);
}
</script>
</head>
<body onLoad="show()">
<a href="#"><img src="tezt0.jpg" id="imag" border="0"></a>
<script>theLink=document.links;theLink=theLink[theLink.length-1];</script>
</body>
</html>


bowemcAuthor Commented:
hi Zvonko

I implemented your solution on my destop with 3 images....i have now tried to integrate it into my hompage at http://www.fast-drinks.com/ - where you see the Corona Add on the left hand side - this is ment to rotate and link to google. Can you look at my source code and see where the problem is. I'm at a loss as to where it it - the 2 other image are uploded - so that is not the problem.

Thanks as ever
ZvonkoSystems architectCommented:
Normaly you have to do your own work. Otherwise you have to pay someone for debuging work for your site.
Two things I saw at first glance (does not cost): you did not call the function and your image does not have a name.

By the way, my last example is the most robust one from a script version that is anyway not mine. My aproach would look different.

bowemcAuthor Commented:
Zvonko  - sorry, I forgot the body tag! Appologies. Thanks for the help :)

Just one point i'd like to clarify. The origional script i gave preloaded the images. Does your script also preload? Thanks
ZvonkoSystems architectCommented:
My script? It is an rearangment of the original script.
And yes, after every image assignment is the next image preloaded until the last image in the array is reached.

bowemcAuthor Commented:
why i ask is  (and you can try it yourself if you wish) when the page loads the first images shows - but the second image does not load after  5 seconds - it waits till the page has 100% loaded and then after 5 seconds loads. The only reason I noticed is because i have a slow broadband connection today - it almost feels like dial up again ;(  
bowemcAuthor Commented:
it just dawned on me there - sure the call for the function is onLoad. So it isn't called until the page is 100% loaded. Is it possible to call the function any earlier?
ZvonkoSystems architectCommented:
That's because you put the show() call in the body onLoad event handler.
Put it simply behind the function definition.

ZvonkoSystems architectCommented:
Simply stated, the function declaration can be constructed anywhere on the page or in an included script file. I would recommand the <head> section of the page.
Only the function CALL has to be after the <img> tag occurance on the page, that mean immediately after the <img> you can have the <script>show()</script> or far down on the page or in the body tag as onLoad handler statement.

bowemcAuthor Commented:
like so???.....

aig=[
....
...
...
function show() {
....
...
...
}

show();


Thanks again.....hopefully this is it :)
ZvonkoSystems architectCommented:
Seems to work.
See you.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.