25 Replies Latest reply: Jun 13, 2013 10:27 AM by barts5 RSS

    Adding Unique Links to Random Banner Ads

    barts5 Community Member

      Hello,

       

      I am trying to add links to random banner ad images on my website. I have the images showing up and rotating through randomly. Now I just need to figure out how to add a link to each one.

       

      Can anyone help?

       

      Thank you!

       

      Glenn

       

      PS: Here is the code from my site:

       

      ________________________________

       

      <script language="JavaScript">

      <!--

      function random_imglink(){

      var myimages=new Array()

      //specify random images below. You can have as many as you wish

      myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

      myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

      myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

      var ry=Math.floor(Math.random()*myimages.length)

      if (ry==0)

      ry=1

      document.write('<img src="'+myimages[ry]+'" border=0>')

      }

      random_imglink()

      //-->

              </script>

        • 1. Re: Adding Unique Links to Random Banner Ads
          barts5 Community Member

          Also if there is a way to have the ads rotate by themselves (i.e. without refreshing the page) say every 5 seconds that would be awesome!

           

          Thank you very much!

           

          Glenn

          • 2. Re: Adding Unique Links to Random Banner Ads
            MurraySummers CommunityMVP

            Try replacing your code with this -

             

            <script language="JavaScript">

            <!--

            function random_imglink(){

            var myimages=new Array()

            //specify random images below. You can have as many as you wish

            myimages[1][1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

            myimages[1][2]="path_to_page"

            myimages[2][1]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

            myimages[2][2]="path_to_page"

            myimages[3][1]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

            myimages[3][2]="path_to_page"

            var ry=Math.floor(Math.random()*myimages.length)

            if (ry==0)

            ry=1

            document.write('<a href="' + myimages[ry][2] + '">' + '<img src="'+myimages[ry]+'">'+ '</' + 'a>')

            }

            random_imglink()

            //-->

                    </script>

            • 3. Re: Adding Unique Links to Random Banner Ads
              barts5 Community Member

              Thank you for taking the time to post.

               

              For some reason when I try that script I do not see the images??

               

              Also when you have "path_to_page" is that where I add my link (e.g. "gallery.htm")?

               

              Thank you for your help.

               

              Glenn

              • 4. Re: Adding Unique Links to Random Banner Ads
                MurraySummers CommunityMVP

                Yes - should be this -

                 

                <img src="'+myimages[ry][1]+'">'+ '</' + 'a>'

                • 5. Re: Adding Unique Links to Random Banner Ads
                  barts5 Community Member

                  Still cant see the images??

                   

                  Here is what I have in there:

                   

                         <script language="JavaScript">

                  <!--

                  function random_imglink(){

                  var myimages=new Array()

                  //specify random images below. You can have as many as you wish

                  myimages[1][1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                  myimages[1][2]="path_to_page"

                  myimages[2][1]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                  myimages[2][2]="path_to_page"

                  myimages[3][1]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                  myimages[3][2]="path_to_page"

                  var ry=Math.floor(Math.random()*myimages.length)

                  if (ry==0)

                  ry=1

                  document.write('<a href="' + myimages[ry][2] + '">' + '<img src="'+myimages[ry][1]+'">'+ '</' + 'a>')

                  }

                  random_imglink()

                  //-->

                          </script>

                  • 6. Re: Adding Unique Links to Random Banner Ads
                    MurraySummers CommunityMVP

                    OK - try this -

                     

                           <script language="JavaScript">

                    <!--

                    function random_imglink(){

                    var myimages=new Array()

                    var mylinks=new Array()

                    //specify random images below. You can have as many as you wish

                    myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                    mylinks[1]="path_to_page1.jpg"

                    myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                    mylinks[2]="path_to_page2.jpg"

                    myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                    mylinks[3]="path_to_page3.jpg"

                    var ry=Math.floor(Math.random()*myimages.length)

                    if (ry==0)

                    ry=1

                    document.write('<a href="' + mylinks[ry] + '">' + '<img src="'+myimages[ry]+'">'+ '</' + 'a>')

                    }

                    random_imglink()

                    //-->

                            </script>

                     

                    That should get you there....

                    • 7. Re: Adding Unique Links to Random Banner Ads
                      barts5 Community Member

                      Excellent!

                       

                      Seems to be working now.

                       

                      Next question...

                       

                      Is there a way to make the images rotate all by themselves? say every 5 seconds? Without having to reload the page.

                       

                      Thank you so much!

                       

                      Glenn

                      • 8. Re: Adding Unique Links to Random Banner Ads
                        Nancy O. CommunityMVP

                        If you want the banner images to auto rotate, use a different approach. 

                         

                        jQuery Cycle2

                        http://jquery.malsup.com/cycle2/

                         

                        Wow Slider

                        http://wowslider.com/

                         

                         

                        Nancy O.

                        • 9. Re: Adding Unique Links to Random Banner Ads
                          the_shocker Community Member

                          Next question...

                           

                          Is there a way to make the images rotate all by themselves? say every 5 seconds? Without having to reload the page.

                           

                          The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.

                           

                          This should work:

                           

                          <script language="JavaScript">

                          <!--

                          function random_imglink(){

                          var myimages=new Array()

                          var mylinks=new Array()

                          //specify random images below. You can have as many as you wish

                          myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                          mylinks[1]="path_to_page1.jpg"

                          myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                          mylinks[2]="path_to_page2.jpg"

                          myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                          mylinks[3]="path_to_page3.jpg"

                          var ry=Math.floor(Math.random()*myimages.length)

                          if (ry==0)

                          ry=1

                          document.write('<a href="' + mylinks[ry] + '">' + '<img src="'+myimages[ry]+'">'+ '</' + 'a>')

                          }

                          var imageloop=setInterval(function(){random_imglink()},5000);

                          //-->

                          </script>

                           

                          best,

                          Shocker

                          • 10. Re: Adding Unique Links to Random Banner Ads
                            barts5 Community Member

                            Shocker,

                             

                            This almost worked. The only problem is that as soon as it jumps to a new image (after the 5 seconds) it opens a new window and just starts adding the random images.

                             

                            I need the images to shuffle in place on the given page.

                             

                            Any thoughts??

                             

                            Thank you!

                             

                            Glenn

                            • 11. Re: Adding Unique Links to Random Banner Ads
                              the_shocker Community Member

                              That's what it appears your function is set to do: Write an image wrapped in an anchor tag.

                               

                              To cycle banners on page rewrite your function to enter the html into the id of a container by using getelementbyid and innerHTML/href, respectively.

                               

                               

                              Give this a try:

                               

                               

                              html on page (you can use .php array to set a random link/image for default image onload if you prefer).

                               

                              <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                               

                               

                              javascript:

                               

                              <script language="JavaScript">

                              <!--

                              function random_imglink(){

                              var myimages=new Array()

                              var mylinks=new Array()

                              //specify random images below. You can have as many as you wish

                              myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                              mylinks[1]="path_to_page1.jpg"

                              myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                              mylinks[2]="path_to_page2.jpg"

                              myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                              mylinks[3]="path_to_page3.jpg"

                              var ry=Math.floor(Math.random()*myimages.length)

                              if (ry==0)

                              ry=1

                              document.getElementById('bannerid').innerHTML="<img src="'+myimages[ry]+'">";

                              document.getElementById('bannerid').href="+ mylinks[ry] +";

                              }

                              var imageloop=setInterval(function(){random_imglink()},5000);

                              //-->

                              </script>

                               

                              best,

                              Shocker


                              • 12. Re: Adding Unique Links to Random Banner Ads
                                barts5 Community Member

                                I'm sorry you kind of lost me there...I'm pretty new at this.

                                 

                                So the code will stay the same as your previous post but I need to add a line somewhere?

                                 

                                This one:

                                 

                                <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                                 

                                ???

                                 

                                Thanks so much!

                                Glenn

                                • 13. Re: Adding Unique Links to Random Banner Ads
                                  the_shocker Community Member

                                  What's happeneing w/ your  code is that javascript is not specifically telling the function WHERE to put the image. You need to add an element on your page that javascript can find and tell to add a random link/image to. Otherwise it'll just write a link/image, wait 5 seconds, and then write ANOTHER link/image.

                                   

                                  It's not overwriting the previous image becuase javascript does not know exactly WHERE to write the link/image. So you need to add an element to your page with an id and then in your javascript function you're telling javascript to look for that id element in your page and write the random link/image to that element's id.

                                   

                                   

                                  So adding element to page with id is this code:

                                  <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                                   

                                   

                                  And adding code to javascript function to tell it to look for that id on your page and write a random link/image is the extra document.getElementById code that was added to the function.

                                   

                                  document.getElementById('bannerid').innerHTML="<img src="'+myimages[ry]+'">";

                                  document.getElementById('bannerid').href="+ mylinks[ry] +";

                                   

                                   

                                  best,

                                  Shocker

                                  • 14. Re: Adding Unique Links to Random Banner Ads
                                    barts5 Community Member

                                    Great,

                                     

                                    Thank you for explaining.

                                     

                                    So does it matter where I add this?

                                     

                                    <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                                    • 15. Re: Adding Unique Links to Random Banner Ads
                                      the_shocker Community Member

                                      So does it matter where I add this?

                                       

                                      <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                                       

                                      Put it on your page where you want your rotating banner to appear. I'm not exactly sure it'll work because I haven't tested it. Just wrote it up off the top of my head so let me know if you have any other problems setting it up.

                                       

                                      best,

                                      Shocker

                                      • 16. Re: Adding Unique Links to Random Banner Ads
                                        barts5 Community Member

                                        That didnt seem to work. Now I dont see the banner image at all?

                                         

                                        Here's what I added:

                                         

                                                 <script language="JavaScript">

                                        <!--

                                        function random_imglink(){

                                        var myimages=new Array()

                                        var mylinks=new Array()

                                        //specify random images below. You can have as many as you wish

                                        myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                                        mylinks[1]="photoworkshops/Workshops/Manitoba-Churchill.htm"

                                        myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                                        mylinks[2]="photoworkshops/Workshops/CostaRica.html"

                                        myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                                        mylinks[3]="naturephotography/articles/gear.htm"

                                        var ry=Math.floor(Math.random()*myimages.length)

                                        if (ry==0)

                                        ry=1

                                        document.getElementById('bannerid').innerHTML="<img src="'+myimages[ry]+'">";

                                        document.getElementById('bannerid').href="+ mylinks[ry] +";

                                        }

                                        random_imglink()

                                        var imageloop=setInterval(function(){random_imglink()},5000);

                                        //-->

                                                </script>

                                              

                                        <a id="bannerid" href="default page.html"><img src="defaultimage.jpg" /></a>

                                        • 17. Re: Adding Unique Links to Random Banner Ads
                                          the_shocker Community Member

                                          Here ya go. I did a test and there was a set of double quotation marks in the code that should of been single quotes.

                                           

                                           

                                          <!DOCTYPE html>

                                          <html>

                                          <head>

                                          <title>Rotating Banner w/ Link</title>

                                          </head>

                                           

                                          <body>

                                           

                                           

                                          <a id="bannerid" href="photoworkshops/Workshops/Manitoba-Churchill.htm"><img src="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg" /></a>

                                           

                                          <script language="JavaScript">

                                          <!--

                                          function random_imglink(){

                                          var myimages=new Array()

                                          var mylinks=new Array()

                                          //specify random images below. You can have as many as you wish

                                          myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                                          mylinks[1]="photoworkshops/Workshops/Manitoba-Churchill.htm"

                                          myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                                          mylinks[2]="photoworkshops/Workshops/CostaRica.html"

                                          myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                                          mylinks[3]="naturephotography/articles/gear.htm"

                                          var ry=Math.floor(Math.random()*myimages.length)

                                          if (ry==0)

                                          ry=1

                                          document.getElementById('bannerid').innerHTML='<img src="'+myimages[ry]+'">';

                                          document.getElementById('bannerid').href= mylinks[ry];

                                          }

                                          var imageloop=setInterval(function(){random_imglink()},5000);

                                          //-->

                                          </script>

                                          </body>

                                           

                                          </html>

                                           

                                          best,

                                          Shocker

                                          • 18. Re: Adding Unique Links to Random Banner Ads
                                            barts5 Community Member

                                            Nailed it!

                                             

                                            Thanks man. Really appreciate the help :-)

                                            • 19. Re: Adding Unique Links to Random Banner Ads
                                              the_shocker Community Member

                                              Sure thang. Just remember that the initial link/image that displays onload will always be the default image you hard coded into the anchor tag. You could probably overwrite the default link/image by using an onload event to trigger the function in the <body> tag.

                                               

                                              Something like this for opening body tag:

                                               

                                              <body onload="random_imglink();>

                                               

                                              That should call the funtion when the page loads and add a random link/image to the banner.

                                               

                                              Also please make sure to mark forum responses as helpful or solved so others that are looking for the same solution will see what post solved the issue.

                                               

                                              best,

                                              Shocker

                                              • 20. Re: Adding Unique Links to Random Banner Ads
                                                barts5 Community Member

                                                No prob. Will mark the replies.

                                                 

                                                So would I add taht code just at the top of the page? or within the code you sent me?

                                                 

                                                G

                                                • 21. Re: Adding Unique Links to Random Banner Ads
                                                  the_shocker Community Member

                                                  Like this:

                                                   

                                                  <!DOCTYPE html>

                                                  <html>

                                                  <head>

                                                  <title>Rotating Banner w/ Link</title>

                                                  </head>

                                                   

                                                  <body onload="random_imglink();">

                                                   

                                                   

                                                  <a id="bannerid" href="photoworkshops/Workshops/Manitoba-Churchill.htm"><img src="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg" /></a>

                                                   

                                                  <script language="JavaScript">

                                                  <!--

                                                  function random_imglink(){

                                                  var myimages=new Array()

                                                  var mylinks=new Array()

                                                  //specify random images below. You can have as many as you wish

                                                  myimages[1]="naturephotography/Banner Ads/BannerAdd-Churchill2014.jpg"

                                                  mylinks[1]="photoworkshops/Workshops/Manitoba-Churchill.htm"

                                                  myimages[2]="naturephotography/Banner Ads/BannerAdd-CostaRica2014.jpg"

                                                  mylinks[2]="photoworkshops/Workshops/CostaRica.html"

                                                  myimages[3]="naturephotography/Banner Ads/BannerAdd-GearGuide.jpg"

                                                  mylinks[3]="naturephotography/articles/gear.htm"

                                                  var ry=Math.floor(Math.random()*myimages.length)

                                                  if (ry==0)

                                                  ry=1

                                                  document.getElementById('bannerid').innerHTML='<img src="'+myimages[ry]+'">';

                                                  document.getElementById('bannerid').href= mylinks[ry];

                                                  }

                                                  var imageloop=setInterval(function(){random_imglink()},5000);

                                                  //-->

                                                  </script>

                                                  </body>

                                                   

                                                  </html>

                                                   

                                                   

                                                   

                                                  best,

                                                  Shocker

                                                  • 22. Re: Adding Unique Links to Random Banner Ads
                                                    barts5 Community Member

                                                    Hmmm...not sure what I am doing wrong but it always seems to start from the same image.

                                                     

                                                    Here is the actual URL if it is helpful?

                                                     

                                                    http://www.glennbartley.com/

                                                    • 23. Re: Adding Unique Links to Random Banner Ads
                                                      the_shocker Community Member

                                                      First note: nobody likes right-click disabled on their browser. NOBODY!!! It is not preventing anyone from stealing your images or looking at your code. All it does is piss people off.

                                                       

                                                      Second note: you have two opening body tags and two closing body tags. Remove body tags from line 178 and 202, remove closing html tag on line 204, and add onload trigger to body tag on line 164 so it looks like this:

                                                       

                                                       

                                                      <body bgcolor="#000000" text="#707070" onLoad="MM_preloadImages('naturephotography/Text/menu button - gallery b.jpg','naturephotography/Text/menu button - about b.jpg','naturephotography/Text/menu button - purchase b.jpg','naturephotography/Text/menu button - contact b.jpg','naturephotography/Text/menu button - mailig list b.jpg','naturephotography/Text/menu button - links b.jpg','naturephotography/Text/menu button - articles b.jpg','naturephotography/Text/menu button - whats new b.jpg','naturephotography/Text/menu button - blog b.jpg','naturephotography/Text/menu button - workshops b.jpg'); random_imglink();">

                                                       

                                                       

                                                      best,

                                                      Shocker

                                                      • 24. Re: Adding Unique Links to Random Banner Ads
                                                        barts5 Community Member

                                                        Awesome. Thank you again very much!

                                                         

                                                        Glenn

                                                        • 25. Re: Adding Unique Links to Random Banner Ads
                                                          barts5 Community Member

                                                          Made some great progress on this yesterday!

                                                           

                                                          I am wondering now if there is any straightforward way to show an indicator of what ad the person is on. Example clickable arrows that would allow the user to switch between the banners?

                                                           

                                                          Here are some examples of what I mean:

                                                           

                                                          http://www.tigerdirect.ca/

                                                           

                                                          http://www.telus.com/