www.webdeveloper.com
Results 1 to 6 of 6

Thread: Banner link rotation

  1. #1
    Join Date
    Jul 2010
    Posts
    3

    Banner link rotation

    I have a banner which is operated by javascript that changes between images for various sponsor messages that direct the user to the sponsors webpage when the user clicks on the banner. I normally only change between two sponsors and each image has a link associated with it. The whole thing works exactly as i would expect it to but i find that if you place your cursor over each sponsor image, it show the sponsors link. One small detail that bugs me is that if you place your cursor over the image of sponsor 1 and wait for sponsor 2 and then click it still uses the first sponsors link and for it to work correctly, you would need to move your cursor off the banner and onto the banner again to get the new link location for sponsor 2. Is there a work around to sort this out?

    Thanks
    Clinton

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    "In theory" that should be easy to fix depending on how your code is set up.

    If you post your code, it will help make what is going on in your code clearer.

  3. #3
    Join Date
    Jul 2010
    Posts
    3

    the code

    i'm not very familiar with javascript yet so the code might not be elegant but it gets the job done.

    var show=new Image();
    var images = new Array();
    var links=new Array();

    window.onload=function drawbanner()
    {

    //get the array of images and link locations

    images[0]="sponsor1.jpg";
    links[0]='LINK1';
    images[1]="sponsor2.jpg";
    links[1]="Link2";

    //Gotten the links and images

    //preload the images

    for (num=0;num<=1;num++) {
    show[num]=new Image();
    show[num].src = images[num];
    }

    //images have been preloaded

    num=0;

    //start rotating images and links

    setInterval("rotate()", 2300);
    }

    function rotate() {

    //scroll through the items and change the images and links every 2.3 seconds
    num++;

    if (num>1)
    {
    num=0
    }

    document.getElementById("banner").src=show[num].src;
    document.getElementById("banlinks").href=links[num];

    }

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    I'm not sure how your html is marked up, but I assume it is something like in the code below.

    I set up 2 test target pages - page1.htm and page2.htm

    In the code below, when I hover over 1 image and wait for it to change to the second image, although the target href doesn't change in the browser's status bar, the href does change in the DOM (Document Object Model) to that for the second image.

    If I hover on the first image and click it, without moving off it, after it has changed to the second image, my browser does go to the href of the second image.

    PHP 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>
    <
    title></title>
    <
    script type="text/javascript">
    <!--

    var 
    show=new Image();
    var 
    images = new Array();
    var 
    links=new Array();
    var 
    num=0;

    window.onload=function() {
    //get the array of images and link locations
    images[0]="pic1.jpg";
    links[0]='page1.htm';
    images[1]="pic2.jpg";
    links[1]="page2.htm";

    //preload the images 
    for (i=0;i<=1;i++) {
    show[i]=new Image();
    show[i].src images[i];
    }

    //load the initial pic and link
    document.getElementById("banner").src=show[num].src;
    document.getElementById("banlinks").href=links[num];

    //start rotating images and links
    setInterval("rotate()"2300);
    }  
    //end of onload

    function rotate() {
    //scroll through the items and change the images and links every 2.3 seconds
    num++;

    if (
    num>1)   {
    num=0
    }

    document.getElementById("banner").src=show[num].src;
    document.getElementById("banlinks").href=links[num];
    }  
    //end of rorate()

    //-->
    </script>

    </head>
    <body>

    <div>
           <a href="#" id="banlinks" >
           <img id="banner" src="" alt="" />
           </a>
    </div>

    </body>
    </html> 
    Last edited by tirna; 07-19-2010 at 07:14 AM.

  5. #5
    Join Date
    Jul 2010
    Posts
    3

    Talking Correct, but i found a reasonable solution

    That's the way i did it originally but after going through the internet, i found a piece of javascript that did something similar. I'm not sure which browser you are using that it did this, but i always got stuck on the same link. The solution seems to be to create a <div> element rather than an image and change the image. Give the div an id such as id="banner". I then used a property called innerHTML which allows you to delete code inside the div and replace it with another.

    ie everytime it cycles it generates a complete <a><img></a> with link and image for that sponsor and insert it using innerHTML which does the same thing as what i had but this changes the link in the bottom right corner in real time without having to move off the banner and back on.

    I can die happy now
    Last edited by clintonb; 07-19-2010 at 01:36 PM.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by clintonb View Post
    I'm not sure which browser you are using that it did this,.....
    The code I posted works in my IE8, FF3.6 and Opera 10.

    There were a couple of logic errors in your original code which I fixed. No matter how long I leave the cursor on the banner with alternating images, the browser always went to the href for the image I eventually clicked.

Thread Information

Users Browsing this Thread

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

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