473,320 Members | 2,094 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Cycling Banners and Clickable Links

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
3 3433
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
jock1up
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
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

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

Similar topics

0
by: Showjumper | last post by:
I have seen the article on 4 guys that descibes creating an event calandar. However what i would like to do is have the days be clickable (i.e. click the day and it show the details for that event)...
1
by: Adrian | last post by:
Hi All I have some text that I want to parse and display in such a way that a user can click on different bits and depending what the click on call the relevant sub. is the Rich Text Box the...
1
by: Jimmy | last post by:
In the asp.net application I develop, we need to provide the marketing department with the ability to insert small JavaScript code snippets into predefined content areas on several pages. This code...
1
by: Jimmy | last post by:
In the web application I develop, we need to provide the marketing department with the ability to insert small JavaScript code snippets into predefined content areas on several pages. This code is...
2
by: Krustov | last post by:
The question of how to create thumbnails with clickable links gets asked on this newsgroup every so often - like clock work . Just really posing this script here for google to archive it & so...
3
by: Irocivan | last post by:
Hello, I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the...
7
by: Jeff Gaines | last post by:
I have spent the day learning how to use Zend Development Environment. I can now produce a list of files in a directory, filtered by extension, and apparently clickable. Unfortunately clicking on...
3
by: breakupemail | last post by:
Hello, on my website at http://www.breakupemail.com/ there is a horizontal navigation bar with 6 hyperlinks. Recently, I added a second navigation row below the first, with 2 links. Once this...
2
by: GloStix | last post by:
For some reason, FF likes to put a black underline on all my buttons. No matter what I do, it has the line I've tried displaying as block and cursor, anything.. Also I've been trying to get it so...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.