By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,946 Members | 1,610 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,946 IT Pros & Developers. It's quick & easy.

Cycling Banners and Clickable Links

P: 10
I am working with javascript...where I have cycling banners at the top, 3 of them and I need to make two of them clickable to a website that I assign to the two. bannerad2 for www.bigmtn.com and bannerad3 for www.bridgerbowl.com Not sure how to get this to work right, have tried some things and it usually ends up making duplicate banners above the original, which I don't want. Here is some of the code for now:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Ski Montana</title>
  4. <SCRIPT LANGUAGE="JAVASCRIPT">
  5. <!-- Hide from old browers
  6.  
  7.     var banners = new Array("bannerad1.jpg","bannerad2.jpg","bannerad3.jpg")  
  8.     var bnrCntr = 0
  9.     function bancycle() {
  10.          bnrCntr = bnrCntr + 1
  11.          if (bnrCntr == 3) {
  12.          bnrCntr = 0
  13.          }
  14.          document.Bannerad.src = banners[bnrCntr]
  15.          setTimeout("bancycle()",3000)
  16.     }
  17.  
  18. //-->
  19. </SCRIPT>     
  20. </head>
  21. <body bgcolor="WHITE" onload="setTimeout('bancycle()',3000)">
  22.  
  23. </body>
  24. </html>
Feb 3 '09 #1
Share this Question
Share on Google+
3 Replies


ivosilva
P: 17
Hi, jock1up!

Here's a working code to achieve what you want:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.     <title>Ski Montana</title>
  6.  
  7.     <script type="text/javascript">
  8.  
  9.         var banner1 = {src: 'bannerad1.jpg', url: ''};
  10.         var banner2 = {src: 'bannerad2.jpg', url: 'http://bytes.com'};
  11.         var banner3 = {src: 'bannerad3.jpg', url: 'http://www.google.com'};
  12.  
  13.         var banners = new Array(banner1, banner2, banner3);
  14.  
  15.         var bnrCntr = 0;
  16.  
  17.         function bancycle() {
  18.  
  19.             bnrCntr = bnrCntr + 1;
  20.  
  21.             if (bnrCntr == 3) bnrCntr = 0;
  22.  
  23.             var ban = document.getElementById('banner');
  24.  
  25.             ban.src = banners[bnrCntr].src;
  26.  
  27.             if(banners[bnrCntr].url.length > 0) {
  28.                 ban.style.cursor = 'pointer';
  29.                 ban.onclick = function() {
  30.                     window.location.href = banners[bnrCntr].url;
  31.                 }
  32.             } else {
  33.                 ban.style.cursor = 'default';
  34.                 ban.onclick = function(){};
  35.             }
  36.  
  37.             setTimeout(bancycle, 3000);
  38.         }
  39.  
  40.     </script>
  41.  
  42. </head>
  43. <body onload="setTimeout(bancycle, 3000);">
  44.  
  45.     <img id="banner" src="bannerad1.jpg" />
  46.  
  47. </body>
  48. </html>
  49.  
Hope it helps.

Best regards!
Feb 4 '09 #2

P: 10
Thanks! I did try this and the links do work...only problem is that instead of the original banner doing this...it is still there, which doesn't cycle now...and the new one is above it so I have a duplicate banner. I need one that does this...hopefully in the original spot.


Here is more code further down...if that helps, couldn't put it all on here at once! The bold area is what references the existing banner that I had on the page. Thanks 4 the help so far...it's getting there!

Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3. <table cellspacing="0" cellpadding="0" border="0">
  4.   <tr>
  5.     <td width="15" height="6" valign="top"></td>
  6.     <td width="103" height="6" valign="top"></td>
  7.     <td width="10" height="6" valign="top"></td>
  8.     <td width="9" height="6" valign="top"></td>
  9.     <td width="176" height="6" valign="top"></td>
  10.     <td width="1" height="6" valign="top"></td>
  11.     <td width="96" height="6" valign="top"></td>
  12.     <td width="1" height="6" valign="top"></td>
  13.     <td width="209" height="6" valign="top"></td>
  14.     <td width="11" height="6" valign="top"></td>
  15.     <td width="6" height="6" valign="top"></td>
  16.     <td width="133" height="6" valign="top"></td>
  17.   </tr>
  18.   <tr>
  19.     <td width="15" height="89" valign="top"></td>
  20.     <td width="103" height="89" valign="top"></td>
  21.     <td width="10" height="89" valign="top"></td>
  22.     <td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" Name="Bannerad" width="503" height="68"></td>
  23.     <td width="6" height="89" valign="top"></td>
  24.     <td width="133" height="89" valign="top"></td>
  25.   </tr>
Feb 4 '09 #3

ivosilva
P: 17
Hi, jock1up!

I'm not understanding what problem you're having. What do you mean by duplicate banner?

If you try the exact code I sent the banners cycle well and the links work fine on the two last banners.

It would help if I could check the exact Javascript that you are using (I can see that your image does not have an "id" attribute, has in the code I pasted so I guess you're using a customized version).

Best regards!
Feb 4 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.