Rotating Banner Question

Ian Hubling

I'm trying to complete a rotating banner ad within a page I have. The
rotating add has four images that rotate in three-second increments.
I've got the images to rotate ok - but now I want to go one step
further and can't figure out how to do it...

I want to have it so that when the person clicks on the specific ad,
they are taken to a URL that is unique to each ad.

I presume I would have to surround the img tag with an href tag, but
how would I reference the array to get the correct URL?? HELP.

Here is the code I'm using. Any help would be appreciated.

I've omitted unnecessary parts of the page.

-----------------------------------------------
<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner01.jpg", "images/banner02.jpg",
"images/banner03.jpg", "images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}
</script>
</head>
<body onLoad="rotate();">
<div align="center">
<img src="images/banner01.jpg" name="adBanner"/></div>
</body>

Chris Crandell

Ian Hubling <ia*@hubling.com> wrote in message
news:nj********************************@4ax.com...

I'm trying to complete a rotating banner ad within a page I have. The
rotating add has four images that rotate in three-second increments.
I've got the images to rotate ok - but now I want to go one step
further and can't figure out how to do it...

I want to have it so that when the person clicks on the specific ad,
they are taken to a URL that is unique to each ad.

I presume I would have to surround the img tag with an href tag, but
how would I reference the array to get the correct URL?? HELP.

Here is the code I'm using. Any help would be appreciated.

I've omitted unnecessary parts of the page.

-----------------------------------------------
<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner01.jpg", "images/banner02.jpg",
"images/banner03.jpg", "images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}
</script>
</head>
<body onLoad="rotate();">
<div align="center">
<img src="images/banner01.jpg" name="adBanner"/></div>
</body>

Hi,
one suggestion would be to create a URL array of corresponding destinations
and
add an onclick handler to the image which uses the array and thisAd to open
the
appropriate destination.

myURL=new Array( "url1", url2", url3", url4");

function newWindow()
{
// alert( "you clicked " + thisAd);
window.open( myURL[thisAd]); // or a redirect
}

and

<img src="hook1.jpg" name="adBanner"/ onclick="newWindow();"></div>

Ian Hubling

On Sun, 08 Feb 2004 19:19:09 GMT, "Chris Crandell"
<cc******@ix.netcom.com> wrote:

Ian Hubling <ia*@hubling.com> wrote in message
news:nj********************************@4ax.com.. .
I'm trying to complete a rotating banner ad within a page I have. The
rotating add has four images that rotate in three-second increments.
I've got the images to rotate ok - but now I want to go one step
further and can't figure out how to do it...

I want to have it so that when the person clicks on the specific ad,
they are taken to a URL that is unique to each ad.

I presume I would have to surround the img tag with an href tag, but
how would I reference the array to get the correct URL?? HELP.

Here is the code I'm using. Any help would be appreciated.

I've omitted unnecessary parts of the page.

-----------------------------------------------
<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner01.jpg", "images/banner02.jpg",
"images/banner03.jpg", "images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}
</script>
</head>
<body onLoad="rotate();">
<div align="center">
<img src="images/banner01.jpg" name="adBanner"/></div>
</body>

Hi,
one suggestion would be to create a URL array of corresponding destinations
and
add an onclick handler to the image which uses the array and thisAd to open
the
appropriate destination.

myURL=new Array( "url1", url2", url3", url4");

function newWindow()
{
// alert( "you clicked " + thisAd);
window.open( myURL[thisAd]); // or a redirect
}

and

<img src="hook1.jpg" name="adBanner"/ onclick="newWindow();"></div>

Thank you very much! I modified it slightly from your response - but
you gave me exactly what I was looking for. Here's the script I ended
up with. Works like a charm!

//-------------------------------------------------------

<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner02.jpg", "images/banner03.jpg",
"images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}

myURL=new Array("url1.htm", "url2.htm","url3.htm");
function vgotoad()
{
window.location.href(myURL[thisAd]);
}
</script>
</head>

<body onLoad="rotate();">

<div align="center"><img src="images/banner01.jpg" name="adBanner"
onClick="vgotoad();"></div>
</body>

Chris Crandell

Ian Hubling <ia*@hubling.com> wrote in message
news:qo********************************@4ax.com...

On Sun, 08 Feb 2004 19:19:09 GMT, "Chris Crandell"
<cc******@ix.netcom.com> wrote:

Ian Hubling <ia*@hubling.com> wrote in message
news:nj********************************@4ax.com.. .
I'm trying to complete a rotating banner ad within a page I have. The
rotating add has four images that rotate in three-second increments.
I've got the images to rotate ok - but now I want to go one step
further and can't figure out how to do it...

I want to have it so that when the person clicks on the specific ad,
they are taken to a URL that is unique to each ad.

I presume I would have to surround the img tag with an href tag, but
how would I reference the array to get the correct URL?? HELP.

Here is the code I'm using. Any help would be appreciated.

I've omitted unnecessary parts of the page.

-----------------------------------------------
<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner01.jpg", "images/banner02.jpg",
"images/banner03.jpg", "images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}
</script>
</head>
<body onLoad="rotate();">
<div align="center">
<img src="images/banner01.jpg" name="adBanner"/></div>
</body>

Hi,
one suggestion would be to create a URL array of corresponding destinationsand
add an onclick handler to the image which uses the array and thisAd to openthe
appropriate destination.

myURL=new Array( "url1", url2", url3", url4");

function newWindow()
{
// alert( "you clicked " + thisAd);
window.open( myURL[thisAd]); // or a redirect
}

and

<img src="hook1.jpg" name="adBanner"/ onclick="newWindow();"></div>

Thank you very much! I modified it slightly from your response - but
you gave me exactly what I was looking for. Here's the script I ended
up with. Works like a charm!

//-------------------------------------------------------

<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner02.jpg", "images/banner03.jpg",
"images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}

myURL=new Array("url1.htm", "url2.htm","url3.htm");
function vgotoad()
{
window.location.href(myURL[thisAd]);
}
</script>
</head>

<body onLoad="rotate();">

<div align="center"><img src="images/banner01.jpg" name="adBanner"
onClick="vgotoad();"></div>
</body>

Glad I could help !

EMC

Hi -
Yes I agree very helpful. Two quick follow-up, questions. How woul
you add the cursor switch, that is when I mouse over (the rotatin
images), the cursor does not switch to a hand (for example). I trie
adding style cursor auto line in the body tag , to no avail. Secon
question, this works fine in newer versions of Mozilla and Netscap
(6.x ->) but nothing happens in say Netscape 4.7x. No JS error
nothing. Any ideas here.
Thanks a bunch -
EMC

Chris Crandell wrote:

*Ian Hubling <ia*@hubling.com> wrote in message
news:qo********************************@4ax.com...
On Sun, 08 Feb 2004 19:19:09 GMT, "Chris Crandell"
<cc******@ix.netcom.com> wrote:
destinations open
Thank you very much! I modified it slightly from your response

but
you gave me exactly what I was looking for. Here's the script

ended
up with. Works like a charm!

//-------------------------------------------------------

<head>
<script>
var myPix, imCt, thisAd;
myPix=new Array("images/banner02.jpg", "images/banner03.jpg",
"images/banner04.jpg");
imgCt=myPix.length;
var thisAd=0;
function rotate()
{
thisAd++
if(thisAd==imgCt)
{
thisAd=0;
}
document.adBanner.src=myPix[thisAd];
setTimeout("rotate()",3*1000);
}

myURL=new Array("url1.htm", "url2.htm","url3.htm");
function vgotoad()
{
window.location.href(myURL[thisAd]);
}
</script>
</head>

<body onLoad="rotate();">

<div align="center"><img src="images/banner01.jpg" name="adBanner"
onClick="vgotoad();"></div>
</body>

Glad I could help !

-
EM

Rotating Banner Question

This discussion thread is closed

Similar topics