1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need Banner Rotator Help

Discussion in 'HTML & JavaScript' started by [email protected], Jul 29, 2016.

  1. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    Hey guys. I am no coder and I got this html banner rotator from a old thread here on BHW. The html displays the banners fine, but I have no idea how to make the banners clickable with a link.

    Need help big time.

    Here's the html:

    Code:
        <!doctype html>
        <html>
        <head>
            <title>Banners</title>
            <script>
                var banners = [];
                banners.push({src: "http://banner1.com.jpg", alt: "Image 1"});
                banners.push({src: "http://banner2.com.jpg", alt: "Image 2"});
                banners.push({src: "http://banner3.comjpg", alt: "Image 3"});
                banners.push({src: "http://banner4.com.jpg", alt: "Image 4"});
                banners.push({src: "http://banner5.com.jpg", alt: "Image 5"});
    
                window.onload = function() {
                    var index = Math.floor(Math.random() * banners.length);
                    var ad = document.getElementById("ad");
                    ad.setAttribute("src", banners[index].src);
                    ad.setAttribute("alt", banners[index].alt);
                    ad.style.display = "block";
                }
            </script>
            <style>
                #ad {
                    display: none;
                }
            </style>
            <noscript>
                <style>
                    #ad {
                        display: block;
                    }
                </style>
            </noscript>
        </head>
        <body>
            <img id="ad" src="image1.png" alt="Image 1" />
        </body>
    
       
    
    
     
  2. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,787
    Likes Received:
    2,173
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    • Thanks Thanks x 1
  3. ChanzGrande

    ChanzGrande Elite Member

    Joined:
    Feb 16, 2008
    Messages:
    2,487
    Likes Received:
    1,177
    Occupation:
    Accountant
    Location:
    Northern Woods Counting Money
    Does this work?

    Code:
    <!doctype html>
      <html>
      <head>
      <title>Banners</title>
      <script>
      var banners = [];
      banners.push({ahref: "http://link1", src: "http://banner1.com.jpg", alt: "Image 1"});
      banners.push({ahref: "http://link2", src: "http://banner2.com.jpg", alt: "Image 2"});
      banners.push({ahref: "http://link3", src: "http://banner3.comjpg", alt: "Image 3"});
      banners.push({ahref: "http://link4", src: "http://banner4.com.jpg", alt: "Image 4"});
      banners.push({ahref: "http://link5", src: "http://banner5.com.jpg", alt: "Image 5"});
    
      window.onload = function() {
      var index = Math.floor(Math.random() * banners.length);
      var ad = document.getElementById("ad");
      ad.setAttribute("a href", banners[index].ahref);
      ad.setAttribute("src", banners[index].src);
      ad.setAttribute("alt", banners[index].alt);
      ad.style.display = "block";
      }
      </script>
      <style>
      #ad {
      display: none;
      }
      </style>
      <noscript>
      <style>
      #ad {
      display: block;
      }
      </style>
      </noscript>
      </head>
      <body>
      <img id="ad" a href="http://link1" src="image1.png" alt="Image 1" />
      </body>
    
    
    Anyway, this doesn't really seem like the best way to accomplish this sort of goal anyway. What prevents you from using a standard standalone ad rotator? There are plenty of free working examples scattered across the interwebs. I could definitely think of much better ways to accomplish this all the way around, but I've historically used Revive Ad Server(OpenX) to serve ads since it is so easy to manage. For simple ad rotation certainly a script seems like the easiest solution, but the script you supplied is far from modern. Hope you get it to work, or find another solution.

    Here is a link to a working example.

    http://www.phpbuddy.com/article.php?id=4
     
    • Thanks Thanks x 1
  4. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
  5. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    I'll test it now.
     
  6. ChanzGrande

    ChanzGrande Elite Member

    Joined:
    Feb 16, 2008
    Messages:
    2,487
    Likes Received:
    1,177
    Occupation:
    Accountant
    Location:
    Northern Woods Counting Money
    If you don't find it working to meet your exact needs, PM me, and we can hook up on Skype and I'll walk you through something that more closely matches your usage scenario. I'm not overly confident my adjustments to your original script will make it work, but I do know there are plenty of other solutions. :)
     
    • Thanks Thanks x 1
  7. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    Just tried and it didn't work... Thanks though.
     
  8. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    ok sounds good. Gonna try something first.
     
  9. ChanzGrande

    ChanzGrande Elite Member

    Joined:
    Feb 16, 2008
    Messages:
    2,487
    Likes Received:
    1,177
    Occupation:
    Accountant
    Location:
    Northern Woods Counting Money
    For a simplistic approach, I've recommended to others in the past to use a 3 page approach.

    Page 1 = 1-5 html pages each coded properly with the actual banner ad and appropriate link.
    Page 2 = a PHP script rotator that randomly selects one of the ads to display from the existing ad pool.
    Page 3 = Wherever you are serving the banner you can just call up the Page 2 inside an appropriate sized iframe.

    In this way the iframe will load the php file which will select from the appropriate ads and it will have a working link. I hope this makes sense as I absolutely know this method works because I've used variations of it for years. I am happy to supply this information with more detail so you can see for yourself how it all works if your other solutions still fall short of your goals, so just hit me by PM and I'll be happy to walk you through this approach if needed. Good luck!
     
    • Thanks Thanks x 1
  10. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    OK thanks.... I have a couple things to try and if they don't work I will PM you.
     
  11. The Scarlet Pimp

    The Scarlet Pimp Senior Member

    Joined:
    Apr 2, 2008
    Messages:
    877
    Likes Received:
    3,313
    Occupation:
    Chair moistener.
    Location:
    Cyberspace
    this should do what you want...

    call the script with:
    <script type="text/javascript" src="http://domain.com/banners.js"></script>

    save below as "banners.js":

    <!--
    y = 0;
    ad = new Array(y);

    ad[y++] = "<a href=\"http://domain01.com\"><img src=\"http://domain.com/01.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain02.com\"><img src=\"http://domain.com/02.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain03.com\"><img src=\"http://domain.com/03.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain04.com\"><img src=\"http://domain.com/04.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain05.com\"><img src=\"http://domain.com/05.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain06.com\"><img src=\"http://domain.com/06.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain07.com\"><img src=\"http://domain.com/07.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain08.com\"><img src=\"http://domain.com/08.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain09.com\"><img src=\"http://domain.com/09.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain10.com\"><img src=\"http://domain.com/10.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain11.com\"><img src=\"http://domain.com/11.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    ad[y++] = "<a href=\"http://domain12.com\"><img src=\"http://domain.com/12.jpg\" width=\"150\" height=\"150\" border=\"0\" alt=\"Alt Text\"></a>"

    // Continue if more are required

    x = Math.floor(Math.random()*(y));
    document.write(ad[x]);
    // -->

    ---

    i'd switch from j.script (some people have it turned off) and use a php script.
    that's what i use on my pages and it shows a different image every time the page is loaded.
     
    • Thanks Thanks x 2
  12. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    I got it working now. Here's the working one.

    Code:
    <script type="text/javascript">
    <!-- Begin
    rnd.today=new Date();
    rnd.seed=rnd.today.getTime();
    
    function rnd() {
            rnd.seed = (rnd.seed*9301+49297) % 233280;
            return rnd.seed/(233280.0);
    };
    
    function rand(number) {
        var result = Math.ceil(rnd()*number);
        if (!result)result++;
            return result
    };
    var ad_cnt1 = 10;
    var ad1 = rand(ad_cnt1);
    var link1;
    var adBanner1;
    var width1
    var height1
    if (ad1==1) {
    link1="http://yourdomain.com/1";
    adBanner1="http://yourdomain.com/images/banner3.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==2) {
    link1="http://yourdomain.com/2";
    adBanner1="http://yourdomain.com/images/banner4.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==3) {
    link1="http://yourdomain.com/3";
    adBanner1="http://yourdomain.com/images/banner5.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==4) {
    link1="http://yourdomain.com/4";
    adBanner1="http://yourdomain.com/images/banner6.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==5) {
    link1="http://yourdomain.com/5";
    adBanner1="http://yourdomain.com/images/banner7.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==6) {
    link1="http://yourdomain.com/6";
    adBanner1="http://yourdomain.com/images/banner8.gif";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==7) {
    link1="http://yourdomain.com/7";
    adBanner1="http://yourdomain.com/images/banner9.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==8) {
    link1="http://yourdomain.com/8";
    adBanner1="http://yourdomain.com/images/banner10.png";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==9) {
    link1="http://yourdomain.com/9";
    adBanner1="http://yourdomain.com/images/banner11.gif";
    width1="728";
    height1="90";
    alt1="";
    }
    if (ad1==10) {
    link1="http://yourdomain.com/10";
    adBanner1="http://yourdomain.com/images/banner12.jpg";
    width1="728";
    height1="90";
    alt1="";
    }
    document.write('<center><a href="' + link1 + '" target="_top">');
    document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>');
    document.write('</center>');
    // End -->
    </SCRIPT>
    
     
    • Thanks Thanks x 1
  13. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    Thanks for all the help guys :)
     
  14. ChanzGrande

    ChanzGrande Elite Member

    Joined:
    Feb 16, 2008
    Messages:
    2,487
    Likes Received:
    1,177
    Occupation:
    Accountant
    Location:
    Northern Woods Counting Money
    Solidly clever! Again you may want to consider that many people don't use JS anymore, so you should have a backup for serving ads in the "no script" situation as The Scarlett Pimp suggested unless you are not concerned about lost ad servings.

    I do find you solution elegant for those users who will have JS turned on.
     
  15. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    I might switch it up in a few days so everybody will see my stuff.
     
  16. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    That looks good and I saved it so I can switch to it later on.... Thanks alot :)
     
  17. The Scarlet Pimp

    The Scarlet Pimp Senior Member

    Joined:
    Apr 2, 2008
    Messages:
    877
    Likes Received:
    3,313
    Occupation:
    Chair moistener.
    Location:
    Cyberspace
    a php version:

    call script with: <?php include 'banners.txt'; ?>

    edit and then save code below as 'banners.txt':

    <?php
    $banner = rand(1,6);

    if ($banner == 1)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    elseif ($banner == 2)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    elseif ($banner == 3)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    elseif ($banner == 4)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    elseif ($banner == 5)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    elseif ($banner == 6)
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    else
    {
    echo '<a href="www.domain.com"><img src="www.domain.com"></a>';
    }

    ?>
     
    • Thanks Thanks x 1
  18. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    You are the man The Scarlet Pimp. I just setup the first one you shared and works like a charm. Now all my ads should be shown to everybody. Thanks alot :)
     
  19. WORK@HOME

    [email protected] Senior Member

    Joined:
    Apr 25, 2013
    Messages:
    924
    Likes Received:
    406
    Location:
    Right Here
    Crap..... I guess I should have used the php version huh? I setup the js. version. Oh well, I don't mind the work.
     
  20. revproxy

    revproxy BANNED BANNED Jr. VIP Premium Member

    Joined:
    Nov 20, 2015
    Messages:
    396
    Likes Received:
    100
    Gender:
    Male
    PHP:
    <?php
    // Garry (revproxy), Banner rotation example for BWH thread:
    // http://www.blackhatworld.com/seo/need-banner-rotator-help.863396/

    class Banner {
        private 
    $click;
        private 
    $src;

        function 
    __construct($click$src) {
            
    $this->click $click;
            
    $this->src $src;
        }

        public function 
    getTag() {
            return 
    "<a href='{$this->click}'><img src='{$this->src}' /></a>";
        }
    }

    class 
    BannerRotator {
        private 
    $banners;

        function 
    __construct($banners = array()) {
            
    $this->banners $banners;
        }

        public function 
    getRandomTag() {
            
    $rnd_idx array_rand($this->banners);
            
    $rnd $this->banners[$rnd_idx];
            if ( ! 
    is_null($rnd)) {
                return 
    $rnd->getTag();
            }
            throw new 
    Exception('No Banners');
        }

        public function 
    addBanner($banner) {
            if (
    $banner instanceof Banner) {
                
    $this->banners[] = $banner;
            } else {
                throw new 
    Exception('banner is not instance if Banner');
            }
        }
    }

    // How to use

    // array of banners
    $arr = array(
        new 
    Banner('https://rev.proxies.online''http://link_to_img'),
        new 
    Banner('http://www.blackhatworld.com/''http://link_to_img'),
        new 
    Banner('http://die.life''http://link_to_img')
    );

    // Banner rotator instance
    $rotator = new BannerRotator($arr);

    // Print random banner tag
    echo $rotator->getRandomTag();

    // Add banner to rotation list
    $rotator->addBanner(new Banner('https://rev.proxies.online/contact''http://link_to_img'));

    ?>
    I wrote a good example for you... have fun :)