www.webdeveloper.com
Results 1 to 6 of 6

Thread: adding unique link to each timed banner

  1. #1
    Join Date
    Jun 2012
    Posts
    5

    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:

    var bannerImg = new Array();
    // Enter the names of the images below
    bannerImg[0]="/images/cover one.png";
    bannerImg[1]="/images/cover two.png";
    bannerImg[2]="/images/cover three.png";

    var newBanner = 0;
    var totalBan = bannerImg.length;


    function cycleBan() {
    newBanner++;
    if (newBanner == totalBan) {
    newBanner = 0;
    }
    document.banner.src=bannerImg[newBanner];
    // set the time below for length of image display
    // i.e., "4*1000" is 4 seconds
    setTimeout("cycleBan()", 4*1000);
    }
    window.onload=cycleBan;


    Most of it seems pretty straight forward:

    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:

    <TD width=342 height=410 border=0 valign=top align=center><img src="image_jss.gif" name="banner"border=0><TD>

    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.

    much appreciated,
    Matt

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,221
    I would use an array of objects.

    Code:
    YourArrayData = [{src:"/images/cover one.png",href:"link1.html",duration:4000},
    {src:"/images/cover two.png",href:"link2.html",duration:8000}, ...];
    You then have to rotate the array rather than keep count and save on a variable.

    Code:
    var tmp = YourArrayData.shift(); // remove first element
    YourArrayData.push( tmp ); // put back on array
    your tmp variable is now an object containing the data you need...

    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.

    So you would need something like
    Code:
    <a id="bannerLink" href="#"><img id="bannerImg" src="image_jss.gif" name="banner" border=0></a> 
    
    bImg = document.getElementById("bannerImg");
    bLink = document.getElementById("bannerLink");
    
    bImh.src = tmp.src;
    bLink.href = tmp.href;
    
    setTimeout("nextBannerRotationFunctionCall()",tmp.duration);
    You get the picture...

    You can add other information in the object data and apply it to the <a and <img tags such as title and even functions.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jun 2012
    Posts
    5
    Whoa, looks like this is a little bit above my pay grade. I may have to stare at it for a few days.

    thanks,
    Matt

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,221
    Its fairly simple when you look at what the data is.

    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...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,221
    If it helps... you could use something like this which is out of my head and untested but in theory would work if you changed the names of target elements...

    Code:
    banner = {
        img:[],
        init:function(){
            if(this.img.length){
                clearInterval(banner.auto);
                this.targetImg = document.getElementById("theTargetImage");
                this.targetLnk = document.getElementById("theTargetLink");
                }
                this.update();
         },
         addData:function(dataObj){
                this.img.push(dataObj);
         },
         rotateArray = function(){
            var tmp = this.img.shift();
            this.img.push( tmp );
            return tmp;
         },
         update:function(){
                var i = this.rotateArray();
                this.targetImg.src = i.src;
                this.targetLnk.href = "/images/"+i.href;
                this.auto = setTimeout("banner.update();",i.duration);
        },
        auto:setInterval("banner.init()",2000)
    }
    // now add some data
    banner.addData({src:"cover one.png", href:"link1.html", duration:4000});
    banner.addData({src:"cover two.png", href:"link2.html", duration:8000});
    banner.addData({src:"cover three.png", href:"link3.html", duration:5000});
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,221
    Maybe it would help to explain so you understand the function.

    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles