Skip navigation
Currently Being Moderated

Adding Unique Links to Random Banner Ads

Jun 12, 2013 1:00 PM

Tags: #cs3 #dreamweaver #javascript

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>

 
Replies
  • Currently Being Moderated
    Jun 12, 2013 1:12 PM   in reply to barts5

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 1:56 PM   in reply to barts5

    Yes - should be this -

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 2:36 PM   in reply to barts5

    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....

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 3:55 PM   in reply to barts5

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 4:17 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 4:44 PM   in reply to barts5

    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


     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 4:49 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 4:59 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:09 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:22 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:27 PM   in reply to barts5

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:51 PM   in reply to barts5

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points