Put links on the image slider/banner rotator

Need to make every image link to a page and activate programatically

[cyberjorge]

I got the following scripts from another site.

/* ####################### begins list of images to be used
currentIndx=0;
MyImages=new Array();
MyImages[0]='vulcano.gif';
MyImages[1]='eye.gif';
MyImages[2]='ear.gif';
MyImages[3]='hand.gif';

/* ####################### now we preload the images
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}

/* ####################### this function loads a random image
function newImage() {
// Makes a random, whole number between 0 and 3
currentIndx=Math.round(Math.random()*3)
document.theImage.src=imagesPreloaded[currentIndx].src
}

// To call the function inside the body tag//
<img src="vulcano.gif" name="theImage" id="theImage" alt="Slide Show" height="120" width="120" />

To call the function I put newImage() on the Body onLoad and on other events mostly like this: onclick='newImage()';

Now my question is...

1. How do I call the newImage() function on every event (click, refresh, etc.) programatically without manually putting this on every event?

2. How can i put a designated link on every image?
I tried this: MyImages[0]='vulcano.gif';'content.htm';
but this won't work.

I'll appreciate any help.
Thanks!

[cyberjorge]

Anyone?

[Fotiman]

1) Instead of event "handlers", you should consider using event "listeners". For any given element, there can be only a single event handler, but there can be any number of event listeners. Given that events will bubble up the DOM tree, you should be able to apply the event listeners to your body element. Here's an example that uses the YAHOO UI Library [developer.yahoo.com]'s Event Utility:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></script> 
<script type="text/javascript"> 
YAHOO.util.Event.onDOMReady(function(){ 
  var bd = document.getElementsByTagName('body')[0]; 
  YAHOO.util.Event.on(bd,'click',newImage); 
  // Copy line above, replace 'click' w/ other events 
}); 
</script> 

2) Change your array code slightly:

var MyImages = [ 
  ['vulcano.gif','content.htm'], 
  ['eye.gif','eye.htm'], 
  ['ear.gif','ear.htm'], 
  ['hand.gif','hand.htm'] 
]; 
var imagesPreloaded = []; 
for (var i = 0; i < MyImages.length ; i++) { 
  imagesPreloaded[i] = []; 
  imagesPreloaded[i][0] = new Image(120,120); 
  imagesPreloaded[i][0].src = MyImages[i][0]; 
  imagesPreloaded[i]= MyImages[i][1]; 
} 

That avoids the overhead of the 'new' and is a little lighter. In this example, MyImages is an array, and each item in the array is also an array (with the first item containing the image src and the second item containing the URL).
Next, your HTML code must look something like this:
<a href="#" id="theLink"><img id="theImage" /></a>
Note, I've given each element an id (so you can reference the <a> element to modify the href value). Modify your newImage function like this:

function newImage() { 
  // Makes a random, whole number between 0 and 3 
  var currentIndx=Math.round(Math.random()*3); 
 document.getElementById('theLink').href = imagesPreloaded[currentIndx][1]; 
  document.getElementById('theImage').src= imagesPreloaded[currentIndx][0].src; 
}

I haven't tested it, but I think that will work. :-)

[1][edited by: Fotiman at 4:16 pm (utc) on Sep. 17, 2008]

[cyberjorge]

Thanks a lot Fotiman, I can kiss you for this!
I appreciate it, you really helped me with this.

1.) I been searching the whole net for this, I didn't know Yahoo UI Library has it. Thank you much for sharing this. One question though, do I need to exempt the banner picture in the event listener? If so, how is that?

2.) This won't work for me, maybe because i need to point the link to a javascript or I'm missing something. I end up with the following code instead:

if (document.images) {
ads = new Array(4);
ads[0] = "media/banner/image1.jpg";
ads[1] = "media/banner/image2.jpg";
ads[2] = "media/banner/image3.jpg";
ads[3] = "media/banner/image4.jpg";

newplace = new Array(4);
newplace[0] = "javascript:showdiv('contentarea'); ajaxpage('link1.html', 'contentarea'); changeZIndex(10);"
newplace[1] = "javascript:showdiv('contentarea'); ajaxpage('link2.html', 'contentarea'); changeZIndex(10);"
newplace[2] = "javascript:showdiv('contentarea'); ajaxpage('link3.html', 'contentarea'); changeZIndex(10);"
newplace[3] = "javascript:showdiv('contentarea'); ajaxpage('link4.html', 'contentarea'); changeZIndex(10);"

function banner() {
currentImg=Math.round(Math.random()*3)
document.bannerad.src = ads[currentImg]; 
}
function gothere() {
currentLnk = currentImg;
window.location.href = newplace[currentLnk]; }

What I'm having trouble now is when you click the banner, it sometimes directs to a wrong link. I suspect because of the event listener or maybe my banner script. Please help me analyze this further.

The site is in this <snip> The banner I am referring to is in the left side.

[edited by: engine at 9:22 am (utc) on Sep. 20, 2008]
[edit reason] No urls, thanks, See TOS agreement [/edit]

[cyberjorge]

Oh! Sorry for the link, I'm just trying to show the problem on the site. But rules is rules.

About the topic, I still can't get this fixed.
Anymore inputs will be appreciated!

[cyberjorge]

anyone who can suggest?