PhilW
11-18-2002, 07:52 PM
I saw in earlier posts, recommendations to use scripts at www.dyn-web.com if you wanted multiple image rotation scripts on the same page. I tried to use it on an existing site with just one banner at first - but it did not show at all.
I then created a brand new one page web and placed the code, changed for my images, into the page, still the same - no show.
I must be doing something wrong and have checked it many times. If some one could show me where I am going wrong i would be very grateful.
The attached file is from View/Source on the script at dyn-web, saved as a .txt file
The code below is my one page site. All I did was to change the image and .js reference and removed the second banner code.
I have stored the images in a folder in the root web called 'scro' and placed the dw_write.js in the root as well.
Thank you
My page code
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style type="text/css">
<!--
body, td { font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px; }
h1 { font-size:16px }
a:link { color:#03c }
a:visited { color:#69c }
/* for newer browsers, to over-rule varying defaults */
@media screen {
h1, h2, p { margin: 0 0 .8em 0 }
}
/* banners can be positioned absolute or relative */
#ad1, #ad2 { position:relative; z-index:20 }
/* class for banner (see initBanner function) */
.b1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14px; font-weight:bold; color:#00c;
}
.b1 a:link, .b1 a:visited { color:#03c }
-->
</style>
<script src="/dw_write.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
/*
This code is from Dynamic Web Coding
at http://www.dyn-web.com/
Copyright 2001-2 by Sharon Paine
See Terms of Use at http://www.dyn-web.com/bus/terms.html
Permission granted to use this code
as long as this entire notice is included.
*/
// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0);
}
}
// preload images to be included in banners
var imgAr = new Array(
"/scro/1asp.jpg"
"/scro/1bin.jpg"
"/scro/1cam.jpg"
"/scro/1com.jpg"
"/scro/1dig.jpg"
"/scro/1slr.jpg"
);
if (document.images) {
var imgs = new Array();
for (var i=0; i<imgAr.length; i++) {
imgs[i] = new Image();
imgs[i].src = imgAr[i];
}
}
function bannerObj(id,w,h,x,y,d,cls) {
this.bobj=writeObj;
this.bobj(id,w,h,x,y);
this.delay=d; this.cls=cls;
this.items = new Array();
this.w=w;
this.obj=id+"bannerObj"; eval(this.obj+"=this");
}
function rotate() {
var cntnt;
if (document.layers) cntnt = '<table width="'+this.w+'"><tr><td class="' + this.cls + '">' + this.items[this.ctr] +
'</td></tr></table>';
else cntnt = '<div class="' + this.cls + '">' + this.items[this.ctr] + '</div>';
this.writeLyr(cntnt);
if (this.ctr < this.items.length-1) this.ctr++;
else this.ctr = 0;
setTimeout(this.obj+".rotate()",this.delay);
}
function addBannerItem(txt) {
this.items[this.items.length] = txt
}
bannerObj.prototype=new writeObj;
bannerObj.prototype.ctr = 0;
bannerObj.prototype.addItem = addBannerItem;
bannerObj.prototype.rotate = rotate;
var banners = new Array();
function initBanner() {
// args: id, width, height, left, top, delay, class
// delay is amount of time in milliseconds you linger on each item
// set up a class for formatting your banner (last argument here)
banners[0] = new bannerObj('ad1',100,75,0,0,3000);
// add as many items as you like
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1slr.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1asp.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1cam.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1dig.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1com.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1bin.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].rotate();
}
window.onload=initBanner;
//-->
</script>
</head>
<body>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="500">
<tr>
<td valign="top" rowspan="2">
<h1>Rotating Banners</h1>
<p>Add as many banners as you like. Images, text, a mixture, whatever ...</p>
<p>Read code comments for specific instructions.</p>
<p>Use your browser menu commands to view source or save this file. Don't forget the necessary <a href="../../js/dw_write.js">dw_write.js</a> file. Adjust the path to it in the script tags to suit your directory structure.</p>
<p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html">Terms of Use</a>.</p>
</td>
<td width="180" height="60" valign="top">
<!-- banner 1 -->
<div id="ad1"></div>
</td>
</tr>
<tr>
<td width="180" height="60" valign="top">
<!-- banner 2 -->
<div id="ad2"></div>
</td>
</tr>
<tr>
<td><a href="http://www.dyn-web.com">www.dyn-web.com</a></td>
<!-- ns4 needs gif to hold space -->
<td><img src="../../images/clear.gif" width="180" height="2" border="0"></td>
</tr>
</table>
</body>
</html>
I then created a brand new one page web and placed the code, changed for my images, into the page, still the same - no show.
I must be doing something wrong and have checked it many times. If some one could show me where I am going wrong i would be very grateful.
The attached file is from View/Source on the script at dyn-web, saved as a .txt file
The code below is my one page site. All I did was to change the image and .js reference and removed the second banner code.
I have stored the images in a folder in the root web called 'scro' and placed the dw_write.js in the root as well.
Thank you
My page code
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style type="text/css">
<!--
body, td { font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px; }
h1 { font-size:16px }
a:link { color:#03c }
a:visited { color:#69c }
/* for newer browsers, to over-rule varying defaults */
@media screen {
h1, h2, p { margin: 0 0 .8em 0 }
}
/* banners can be positioned absolute or relative */
#ad1, #ad2 { position:relative; z-index:20 }
/* class for banner (see initBanner function) */
.b1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14px; font-weight:bold; color:#00c;
}
.b1 a:link, .b1 a:visited { color:#03c }
-->
</style>
<script src="/dw_write.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
/*
This code is from Dynamic Web Coding
at http://www.dyn-web.com/
Copyright 2001-2 by Sharon Paine
See Terms of Use at http://www.dyn-web.com/bus/terms.html
Permission granted to use this code
as long as this entire notice is included.
*/
// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0);
}
}
// preload images to be included in banners
var imgAr = new Array(
"/scro/1asp.jpg"
"/scro/1bin.jpg"
"/scro/1cam.jpg"
"/scro/1com.jpg"
"/scro/1dig.jpg"
"/scro/1slr.jpg"
);
if (document.images) {
var imgs = new Array();
for (var i=0; i<imgAr.length; i++) {
imgs[i] = new Image();
imgs[i].src = imgAr[i];
}
}
function bannerObj(id,w,h,x,y,d,cls) {
this.bobj=writeObj;
this.bobj(id,w,h,x,y);
this.delay=d; this.cls=cls;
this.items = new Array();
this.w=w;
this.obj=id+"bannerObj"; eval(this.obj+"=this");
}
function rotate() {
var cntnt;
if (document.layers) cntnt = '<table width="'+this.w+'"><tr><td class="' + this.cls + '">' + this.items[this.ctr] +
'</td></tr></table>';
else cntnt = '<div class="' + this.cls + '">' + this.items[this.ctr] + '</div>';
this.writeLyr(cntnt);
if (this.ctr < this.items.length-1) this.ctr++;
else this.ctr = 0;
setTimeout(this.obj+".rotate()",this.delay);
}
function addBannerItem(txt) {
this.items[this.items.length] = txt
}
bannerObj.prototype=new writeObj;
bannerObj.prototype.ctr = 0;
bannerObj.prototype.addItem = addBannerItem;
bannerObj.prototype.rotate = rotate;
var banners = new Array();
function initBanner() {
// args: id, width, height, left, top, delay, class
// delay is amount of time in milliseconds you linger on each item
// set up a class for formatting your banner (last argument here)
banners[0] = new bannerObj('ad1',100,75,0,0,3000);
// add as many items as you like
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1slr.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1asp.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1cam.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1dig.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1com.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].addItem('<a href="http://www.dartmoorphotographic.com/products.htm"><img src="/scro/1bin.jpg" width="100"
height="75" alt="" border="0"></a>');
banners[0].rotate();
}
window.onload=initBanner;
//-->
</script>
</head>
<body>
<table align="center" border="0" cellpadding="6" cellspacing="0" width="500">
<tr>
<td valign="top" rowspan="2">
<h1>Rotating Banners</h1>
<p>Add as many banners as you like. Images, text, a mixture, whatever ...</p>
<p>Read code comments for specific instructions.</p>
<p>Use your browser menu commands to view source or save this file. Don't forget the necessary <a href="../../js/dw_write.js">dw_write.js</a> file. Adjust the path to it in the script tags to suit your directory structure.</p>
<p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html">Terms of Use</a>.</p>
</td>
<td width="180" height="60" valign="top">
<!-- banner 1 -->
<div id="ad1"></div>
</td>
</tr>
<tr>
<td width="180" height="60" valign="top">
<!-- banner 2 -->
<div id="ad2"></div>
</td>
</tr>
<tr>
<td><a href="http://www.dyn-web.com">www.dyn-web.com</a></td>
<!-- ns4 needs gif to hold space -->
<td><img src="../../images/clear.gif" width="180" height="2" border="0"></td>
</tr>
</table>
</body>
</html>