If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

adding unique link to each timed banner

Hello,

I snarfed a java script online that did as advertised: Allowed pics to be displayed in a rotating manner based on a time
value you set in the script. I don't know if I can attach the script (this is my first time trying) so I will paste it here. It's fairly
short. I've done a little bit of C and PHP programming, but I am a weekend warrior. Looking for a pro to help out. Here goes:

1) create an array then stuff your pics in it.
2) set a couple of variables, one that equals 0 and the other the length of the array
3) create a function and begin it with 'For Loop' with a counter so you don't count past the length of the array (all very C'ish so far)

The next line starts to get a little weird for someone who doesn't work with javascript. It's assigning document.banner.src equal to what's in the zero position of the array. Then it wait's for 4 seconds and exits the function. Then the line window.onload=cycleBan; not sure what that means. I can only deduce that since it has .onload in it, that it loads up the pic and displays it? Then the script counts through and displays all the pics.

But what really weirds me out is what I have to put in the cell to make it all work:

Img src="image_jss.gif" what's that all about? I mean, it works and all, put my pics are .png and you have to have name=banner too or it won't work. Anyway, Is there a way that when one of the pics is displayed on the webpage a link can be assigned to it? then when the pic changes, a different link can be assigned? And so on? I could have asked all this without going through the code, but I thought it would be a good chance to learn a little more about how javascript works.

tmp.src can be used to set the src element of an image tag <img
tmp.href can be used directly to set the href tag of the link <a
tmp.duration can be used to set the time out fir the display allowing you to have different timings for each banner.

You can add other information in the object data and apply it to the <a and <img tags such as title and even functions.

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...

1. You have an array
2. The array has "Objects" which is a fancy array that allows you to name stuff
3. you don't have a loop counter and no checking of the array length to contend with because you are not moving a "pointer", you are moving the data while grabbing a copy of the current data from the array, that data is the object.
4. you access the data by its "property" .src and .href
5. the objects in the array can contain more elements that describe other items you want to have set like the image tags title.
6. you then set a timer function to call the update routine that starts the whole process of grabbing an object from the array, stuffing it back in to the array...

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...

banner is a JSON variable that contains functions and variables.
When the script is loaded, the value of banner.auto is set and that is a setInterval timer that is called every 2 seconds and the function that is called is banner.init()

the init() function is set to check if the array that holds the images has any data, if it has then it cleared the interval timer and grabs the identity of the two elements you will be setting with the image and link data. The function calls the function update() which should be inside the if(){} conditional but typo made if outside of it...

Once the update function is called the data in the array is obtained, these are objects.

The array removes the first element in the array in to a variable tmp then pushes it on to the back of the array and then returns an object, eg {src:"cover one.png", href:"link1.html", duration:4000}

This is returned to the variable i, this means that I now has properties that can be accessed by using the property name like i.src which is the value in that returned object.

The target properties are now set with this information, your image chages and the link values of the click link also change.

The process is then called again by a setTimeout event which has its duration set by the current object and the whole process starts again and runs while you have an array with images in.

IMHO a routine like this is better because you can add features, extend the object data to include other elements.

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...