...

View Full Version : Rotating Banner issue.



sweetonez
02-26-2006, 10:37 AM
I plan on putting text below each of these small banners. It is more of a rotating advertisement for sold properties rather than banners but it works similarly.
The script I used was only set out for two banners (typical size) and I needed to modify it for five graphics. I managed to change the size appropriately and now they're rotating wonderfully, within frame. Of course this has only been tested in I.E.
Here's the problem: It rotates perfectly through images 1 - 5 and then skips to 2 and 4 and rotates between these two. This is where I am lost. I don't understand how to get it to continually rotate between the five images in succession. (1-5,1-5, etc)
Instead, it rotates images like this:
1,2,3,4,5,2,4,2,4,2,4..etc

I've put the script used below. Plus you can view it at: http://www.ppkservices.com/testing.htm

I'd appreciate any help. I'd rather not throw away the script and start again with another. I'm sure there is a simple solution, something I foolishly did while trying to extend the script to accomadate five rotations instead of just two along with the modification of width and height in every possible area. Yes, I know the page is a mess, I can clean up the display after this issue is fixed. Thankyou in advance!!

Here's the referring script with other body text removed:
<script language="JavaScript">
var displayTime, speed, wait, banner1, banner2, banner3, banner4, banner5, bannerIndex, bannerLocations;


function initVar() {
displayTime = 5; // The amount of time each banner will be displayed in seconds.
speed = 5; // The speed at which the banners is moved (1 - 10, anything above 5 is not recommended).
wait = true;

banner1 = document.getElementById("banner1");
banner2 = document.getElementById("banner2");
banner3 = document.getElementById("banner3");
banner4 = document.getElementById("banner4");
banner5 = document.getElementById("banner5");

banner1.style.left = 0;
banner2.style.left = 150;
banner3.style.left = 300;
banner4.style.left = 450;
banner5.style.left = 600;

bannerIndex = 1;
bannerLocations = new Array("http://www.ppkservices.com/images/DSC05846b.jpg",
"http://www.ppkservices.com/images/k8b.JPG", "http://www.ppkservices.com/images/lindsayrec05b.jpg",
"http://www.ppkservices.com/images/lindsayrec06b.jpg", "http://www.ppkservices.com/images/waller13b.jpg");

bannerURLs = new Array("http://www.ppkservices.com/current.htm","http://www.ppkservices.com/current.htm",
"http://www.ppkservices.com/current.htm", "http://www.ppkservices.com/current.htm",
"http://www.ppkservices.com/current.htm");
}



function moveBanner(){

if(!wait){

banner1.style.left = parseInt(banner1.style.left) - (speed * 5);
banner2.style.left = parseInt(banner2.style.left) - (speed * 5);
banner3.style.left = parseInt(banner3.style.left) - (speed * 5);
banner4.style.left = parseInt(banner4.style.left) - (speed * 5);
banner5.style.left = parseInt(banner5.style.left) - (speed * 5);

if(parseInt(banner1.style.left) <= -150){
banner1.style.left = 150;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ?

++bannerIndex :0;
banner1.src = bannerLocations[bannerIndex];
link1.href = bannerURLs[bannerIndex];
wait = true;
}

if(parseInt(banner2.style.left) <= -150){
banner2.style.left = 150;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ?

++bannerIndex :0;
banner2.src = bannerLocations[bannerIndex];
link2.href = bannerURLs[bannerIndex];
wait = true;
}

if(parseInt(banner3.style.left) <= -150){
banner3.style.left = 150;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ?

++bannerIndex :0;
banner3.src = bannerLocations[bannerIndex];
link3.href = bannerURLs[bannerIndex];
wait = true;
}

if(parseInt(banner4.style.left) <= -150){
banner4.style.left = 150;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ?

++bannerIndex :0;
banner4.src = bannerLocations[bannerIndex];
link4.href = bannerURLs[bannerIndex];
wait = true;
}

if(parseInt(banner5.style.left) <= -150){
banner5.style.left = 150;
bannerIndex = (bannerIndex < (bannerLocations.length - 1)) ?

++bannerIndex :0;
banner5.src = bannerLocations[bannerIndex];
link5.href = bannerURLs[bannerIndex];
wait = true;
}

setTimeout("moveBanner()",100);
} else {
wait = false;
setTimeout("moveBanner()", displayTime * 1000);
}
}


</script>
<style>

#addbox { position: relative; width: 150px; height: 190 px; clip: rect(0px, 150px, 0px, 190px); overflow: hidden; }
#banner1 { position: relative; width: 150px; height: 150px; left: 190px; top: 10px; }
#banner2 { position: relative; width: 150px; height: 150px; left: 190px; top: -160px !important; top:-160px; }
#banner3 { position: relative; width: 150px; height: 150px; left: 190px; top: -160px !important; top:-140px; }
#banner4 { position: relative; width: 150px; height: 150px; left: 190px; top: -160px !important; top:-160px; }
#banner5 { position: relative; width: 150px; height: 150px; left: 190px; top: -160px !important; top:-160px; }

</style>
</head><body onLoad="initVar(); moveBanner()" alink="#ff0000" link="#000000" vlink="#808080">

<div align="center"><div name="addbox" id="addbox">
<p><a name="link1" id="link1" href="http://www.ppkservices.com/current.htm"><img border="0"
name="banner1" id="banner1" src="http://www.ppkservices.com/images/DSC05846b.jpg"
width="150" height="150"></a></p>

<p><a name="link2" id="link2" href="http://www.ppkservices.com/current.htm"><img border="0"
name="banner2" id="banner2" src="http://www.ppkservices.com/images/k8b.JPG"
width="150" height="150"></a></p>

<p><a name="link3" id="link3" href="http://www.ppkservices.com/current.htm"><img border="0"
name="banner3" id="banner3" src="http://www.ppkservices.com/images/lindsayrec05b.jpg"
width="150" height="150"></a></p>

<p><a name="link4" id="link4" href="http://www.ppkservices.com/current.htm"><img border="0"
name="banner4" id="banner4" src="http://www.ppkservices.com/images/lindsayrec06b.jpg"
width="150" height="150"></a></p>

<p><a name="link5" id="link5" href="http://www.ppkservices.com/current.htm"><img border="0"
name="banner5" id="banner5" src="http://www.ppkservices.com/images/waller13b.jpg"
width="150" height="150"></a></p>

Mr J
02-26-2006, 02:39 PM
Played around with your page a bit and came up with this example.

Please note that I do not class myself as very good regarding css so it might still need a tweak here and there




<HTML>
<HEAD>
<TITLE>PPK Asset Services, LLC</TITLE>

<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

pics=[
['www.ppkservices.com/images/DSC05846b.jpg','page1.htm','<div style="font-weight:bold;text-align:center;background-color:bcde9a">Heading One</div><div style="background-color:#cdefab;color:#5555ff">Description relating to image one</div>'],
['www.ppkservices.com/images/k8b.JPG','page2.htm','<div style="font-weight:bold;text-align:center;background-color:#efefcd">Heading Two</div><div style="text-align:center;background-color:#efefab">Description of image Two</div>'],
['www.ppkservices.com/images/lindsayrec05b.jpg','page3.htm','<div style="font-weight:bold;text-align:center;background-color:#de9abc">Heading Three</div><div style="background-color:#efabcd">Description of image Three</div>'],
['www.ppkservices.com/images/lindsayrec06b.jpg','page4.htm','<div style="font-weight:bold;text-align:center;background-color:#9abcde">Heading Four</div><div style="background-color:#abcdef">Description of image Four</div>'],
['www.ppkservices.com/images/waller13b.jpg','page5.htm','Description of image Five']
]

spacer=1
speed=5
pause=5000

function init(){
elCenter=document.getElementById("center_div")
elOne=document.getElementById("div_one")
elTwo=document.getElementById("div_two")
elTwo.style.visibility="hidden"
document.getElementById("pic_one").src=pics[0][0]
document.getElementById("text_display").innerHTML=pics[0][2]
aniLeft=""
nextLeft=""
nextPic=0
divNum=1
runRate=50
moveLeft()
}

function moveLeft(){
nextUrl=nextPic

if(divNum==1){
elPos=parseInt(elOne.style.left)
elOne.style.zIndex=2
}
else{
elPos=parseInt(elTwo.style.left)
elTwo.style.zIndex=2
}

elPos-=speed
aniLeft=setTimeout("moveLeft()",runRate)

if(divNum==1){
elOne.style.left=elPos
elTwo.style.left=elPos-elCenter.offsetWidth-spacer
if(elPos<=0){
elOne.style.left=0
elOne.style.zIndex=""
elTwo.style.left=elCenter.offsetWidth+spacer
elTwo.style.visibility="visible"

document.getElementById("text_display").innerHTML=pics[nextPic][2]

nextPic++
if(nextPic==pics.length){
nextPic=0
}

document.getElementById("pic_two").src=pics[nextPic][0]

clearTimeout(aniLeft)
nextLeft=setTimeout("moveLeft()",pause)

divNum=2
}

}
else{

elTwo.style.left=elPos
elOne.style.left=elPos-elCenter.offsetWidth-spacer
if(elPos<=0){
elTwo.style.left=0
elTwo.style.zIndex=""
elOne.style.left=elCenter.offsetWidth+spacer

document.getElementById("text_display").innerHTML=pics[nextPic][2]

nextPic++
if(nextPic>=pics.length){
nextPic=0
}

document.getElementById("pic_one").src=pics[nextPic][0]

clearTimeout(aniLeft)
nextLeft=setTimeout("moveLeft()",pause)

divNum=1
}

}

}

function goHere(){
url=pics[nextUrl][1]
window.open(url)
}

// add onload="init()" style="overflow-x:hidden" to the opening BODY tag

// -->
</script>
<style>
BODY{
overflow-x:hidden
}

UL{
list-style-type:none
}

LI{
margin-bottom:10px;
margin-left:-20px;
font-weight:bold
}

A{
color:#000000
}

A:visited{
color:#808080
}

A:active{
color:#ff0000
}

table{
widtth:700px;
height:100%;
BORDER-COLLAPSE: collapse;
border:2px solid #000000;
}

TD{
border:2px solid #000000
}

</style>
</HEAD>
<BODY onload="init()">
<div id="qw"></div>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD bgColor=#000000 colSpan=3 height=22>
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;font-size:48px">PPK Asset Services, LLC</div></TD>
</TR>
<TR>
<TD width=150 valign="top">
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;background-color:#000000;margin-top:20px;line-height:40px">Menu</div>
<ul>
<li>&#187;<A href="http://www.ppkservices.com/">PPK Home</A></li>
<li>&#187;<A href="http://www.ppkservices.com/abbott.htm">Current Auctions</A></li>
<li>&#187;<A href="http://www.ppkservices.com/aboutppk.htm">About PPK</A></li>
<li>&#187;<A href="http://www.ppkservices.com/about.htm">Services Offered</A></li>
<li>&#187;<A href="http://www.ppkservices.com/bios.htm">PPK Team</A></li>
<li>&#187;<A href="http://www.ppkservices.com/credos.htm">Business Credos</A></li>
<li>&#187;<A href="http://www.ppkservices.com/">For Sellers</A></li>
<li>&#187;<A href="http://www.ppkservices.com/">For Buyers</A></li>
<li>&#187;<A href="http://www.ppkservices.com/contact.htm">Contact PPK</A></li>
</ul>
</TD>
<TD width=400>
<IMG height=265 alt="PPK Asset Services, LLC" src="PPK Asset Services, LLC_files/uslndfrm3.jpg" width=400 border=0>
</TD>
<TD width=150 valign="top">
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;background-color:#000000;margin-top:20px">Most Recent Auction</div>

<div id="center_div" style="position:absolute;width:150px;height:150px;text-align:left;clip:rect(0,150,150,0)">
<div id="div_one" style="position:absolute; left:202px; top:0px">
<img src="" id="pic_one" width="150px" height=150 alt="1" onclick="goHere()"></div>

<div id="div_two" style="position:absolute; left:202px; top:0px">
<img src="" id="pic_two" width="150px" height=150 alt="2" onclick="goHere()"></div>
</div>

<div id="text_display" style="margin-top:160px"></div>
</TD>
</TR>
<tr>
<TD width=700 colspan="3" style="background-color:#000000">
<div style="text-align:center;font-weigh:bold;font-family:Arial;color:#ffffff;font-size:30px">Agricultural-Commercial-Recreational</div></TD>
</tr>
</TBODY>
</TABLE>
</CENTER>

</BODY>
</HTML>

sweetonez
02-26-2006, 10:29 PM
Thankyou!! This is working beautifully! I do have to tweak it in a couple of ways and was hoping, as it is your script, you may be able to help me with this.
I need to be able to provide linked graphics and text as well as formatted text for the rotating descriptions. By that, I mean to link each picture with a URL as well as each image description. Also, I need to format the image description. Simple centering, bolding, color, etc. Is there any way to do that within the script you've provided. I did attempt a few things but did not succeed, of course html within the brackets below messes things up. Referenced below is probably the piece of info that needs to be altered but it may take some other addition entirely. If you can help me, I would greatly appreciate it. Also, you can return anytime to the page once it is finalized and see your tag line in the code (credit goes where credit's due!). Thank you so much, what you've provided thus far is much better than what I was working with.

pics=[
["http://www.ppkservices.com/images/DSC05846b.jpg","Description of image one"],
["http://www.ppkservices.com/images/k8b.JPG","Description of image Two"],
["http://www.ppkservices.com/images/lindsayrec05b.jpg","Description of image Three"],
["http://www.ppkservices.com/images/lindsayrec06b.jpg","Description of image Four"],
["http://www.ppkservices.com/images/waller13b.jpg","Description of image Five"]
]

Mr J
02-27-2006, 05:16 PM
I have made amendments to the script so that when the image is clicked a new window is opened showing the relevant page.

I have formatted some of the text descriptions to show you one way it could be done.

Remember that you only have a small amount of space for the text so it is important to be brief.

Please copy and try my previous post again.

sweetonez
02-27-2006, 11:08 PM
That is beautiful. Not only is it smoother but also takes less bytes than the original script I had been using. I did a few altercations to text, etc. Again, thank you! You can see the new updated page at:
http://www.ppkservices.com/testing2.htm
But, as it is, I've already replaced the index page with it as well since it looks so good!
Of course, I need to be able to modify this script in the future in a couple of ways that I can not yet seem to do. I'm asking you, the expert. I really want to thank you for your patience in this entire thing. If there's anything I can do to return the favor, just ask. I wish I were as fluent in javascript as you are.
Now then..
I attempted to modify the script to show only four pictures instead of five. Other than removing the particular information:
['www.ppkservices.com/images/waller13b.jpg','page5.htm','Description of image Five']
There must be something else to be done as this merely caused an error and stopped the script once it hit the fifth picture placement in rotation. I couldn't find the other offending pieces of script for this particular issue though I'm sure you know.
If possible, let me know what alterations need to be made to change the picture count to 4 or 6..instead of set at 5. You can just pull out the script blocks to alter and I can compare these changed blocks to the original script.

Kay..another little thing. If I want to alter the width of the cell (and, in effect, the entire table), how can I center the rotating picture within that cell and still keep the fluid movement and alignment of rotation (without overload). This would cause whitespace to be on both sides of the picture within that cell and each picture would come into center alignment during rest and before continuing rotation. My attempts to do so broke the picture, of course.

And lastly.. is there a way to get the link to open in the SAME window as opposed to a new window. I.e. open it _self as opposed to _blank. I can't find any specifying code in the script to alter for this function.

I think after this round of questions, I can leave you alone and will be satisfied with the outcome. It is absolutely beautiful and functioning perfectly! I added "Rotating Banner Script" to your tagline within the source so anyone who looks will know just what part of that page was created by you (as if it's not obvious!).
Thank you so much once again!!

Mr J
02-28-2006, 06:17 PM
If you look at the array you will notice that all but the last index ends in a comma so if you remove the last index the new last indexes comma has to be removed as well, likewise if you add to the array the previously last index requires a comma.

It does sound a bit confusing I know so if you want to go with a more commonly used 2 dimensional array here it is


pics=new Array()
pics[0]=new Array('www.ppkservices.com/images/DSC05846b.jpg','page1.htm','<div style="font-weight:bold;text-align:center;background-color:bcde9a">Heading One</div><div style="background-color:#cdefab;color:#5555ff">Description relating to image one</div>')
pics[1]=new Array('www.ppkservices.com/images/k8b.JPG','page2.htm','<div style="font-weight:bold;text-align:center;background-color:#efefcd">Heading Two</div><div style="text-align:center;background-color:#efefab">Description of image Two</div>')
pics[2]=new Array('www.ppkservices.com/images/lindsayrec05b.jpg','page3.htm','<div style="font-weight:bold;text-align:center;background-color:#de9abc">Heading Three</div><div style="background-color:#efabcd">Description of image Three</div>')
pics[3]=new Array('www.ppkservices.com/images/lindsayrec06b.jpg','page4.htm','<div style="font-weight:bold;text-align:center;background-color:#9abcde">Heading Four</div><div style="background-color:#abcdef">Description of image Four</div>')
pics[4]=new Array('www.ppkservices.com/images/waller13b.jpg','page5.htm','Description of image Five')

Now you can just delete the last index as normal.

To open a document in the current window in function goHere change

window.open(url)

to

location=url

As for the positioning of the display replace the HTML code for the following, hopefully this will work.



<div style="position:relative; width:150px;border:1px solid white">

<div id="center_div" style="position:absolute;left:0;width:150px;height:150px;clip:rect(0,150,150,0)">

<div id="div_one" style="position:absolute; left:150px; top:0px">
<img src="" id="pic_one" width="150px" height=150 alt="1" onclick="goHere()"></div>

<div id="div_two" style="position:absolute; left:150px; top:0px">
<img src="" id="pic_two" width="150px" height=150 alt="2" onclick="goHere()"></div>

</div>

<div id="text_display" style="margin-top:160px"></div>
</div>


Here is the amended code in full just in case you want to compare



<HTML>
<HEAD>
<TITLE>PPK Asset Services, LLC</TITLE>

<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

pics=new Array()
pics[0]=new Array('www.ppkservices.com/images/DSC05846b.jpg','page1.htm','<div style="font-weight:bold;text-align:center;background-color:bcde9a">Heading One</div><div style="background-color:#cdefab;color:#5555ff">Description relating to image one</div>')
pics[1]=new Array('www.ppkservices.com/images/k8b.JPG','page2.htm','<div style="font-weight:bold;text-align:center;background-color:#efefcd">Heading Two</div><div style="text-align:center;background-color:#efefab">Description of image Two</div>')
pics[2]=new Array('www.ppkservices.com/images/lindsayrec05b.jpg','page3.htm','<div style="font-weight:bold;text-align:center;background-color:#de9abc">Heading Three</div><div style="background-color:#efabcd">Description of image Three</div>')
pics[3]=new Array('www.ppkservices.com/images/lindsayrec06b.jpg','page4.htm','<div style="font-weight:bold;text-align:center;background-color:#9abcde">Heading Four</div><div style="background-color:#abcdef">Description of image Four</div>')
pics[4]=new Array('www.ppkservices.com/images/waller13b.jpg','page5.htm','Description of image Five')

spacer=1
speed=5
pause=5000

function init(){
elCenter=document.getElementById("center_div")
elOne=document.getElementById("div_one")
elTwo=document.getElementById("div_two")
elTwo.style.visibility="hidden"
document.getElementById("pic_one").src=pics[0][0]
document.getElementById("text_display").innerHTML=pics[0][2]
aniLeft=""
nextLeft=""
nextPic=0
divNum=1
runRate=50
moveLeft()
}

function moveLeft(){
nextUrl=nextPic

if(divNum==1){
elPos=parseInt(elOne.style.left)
elOne.style.zIndex=2
}
else{
elPos=parseInt(elTwo.style.left)
elTwo.style.zIndex=2
}

elPos-=speed
aniLeft=setTimeout("moveLeft()",runRate)

if(divNum==1){
elOne.style.left=elPos
elTwo.style.left=elPos-elCenter.offsetWidth-spacer
if(elPos<=0){
elOne.style.left=0
elOne.style.zIndex=""
elTwo.style.left=elCenter.offsetWidth+spacer
elTwo.style.visibility="visible"

document.getElementById("text_display").innerHTML=pics[nextPic][2]

nextPic++
if(nextPic==pics.length){
nextPic=0
}

document.getElementById("pic_two").src=pics[nextPic][0]

clearTimeout(aniLeft)
nextLeft=setTimeout("moveLeft()",pause)

divNum=2
}

}
else{

elTwo.style.left=elPos
elOne.style.left=elPos-elCenter.offsetWidth-spacer
if(elPos<=0){
elTwo.style.left=0
elTwo.style.zIndex=""
elOne.style.left=elCenter.offsetWidth+spacer

document.getElementById("text_display").innerHTML=pics[nextPic][2]

nextPic++
if(nextPic>=pics.length){
nextPic=0
}

document.getElementById("pic_one").src=pics[nextPic][0]

clearTimeout(aniLeft)
nextLeft=setTimeout("moveLeft()",pause)

divNum=1
}

}

}

function goHere(){
url=pics[nextUrl][1]
//window.open(url) // open new window
location=url // replace current document
}

// add onload="init()" style="overflow-x:hidden" to the opening BODY tag

// -->
</script>
<style>
BODY{
overflow-x:hidden
}

UL{
list-style-type:none
}

LI{
margin-bottom:10px;
margin-left:-20px;
font-weight:bold
}

A{
color:#000000
}

A:visited{
color:#808080
}

A:active{
color:#ff0000
}

table{
width:700px;
height:100%;
BORDER-COLLAPSE: collapse;
border:2px solid #000000;
}

TD{
border:2px solid #000000
}

</style>
</HEAD>
<BODY onload="init()">

<CENTER>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD bgColor=#000000 colSpan=3 height=22>
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;font-size:48px">PPK Asset Services, LLC</div></TD>
</TR>
<TR>
<TD width=150 valign="top">
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;background-color:#000000;margin-top:20px;line-height:40px">Menu</div>
<ul>
<li>&#187;<A href="http://www.ppkservices.com/">PPK Home</A></li>
<li>&#187;<A href="http://www.ppkservices.com/abbott.htm">Current Auctions</A></li>
<li>&#187;<A href="http://www.ppkservices.com/aboutppk.htm">About PPK</A></li>
<li>&#187;<A href="http://www.ppkservices.com/about.htm">Services Offered</A></li>
<li>&#187;<A href="http://www.ppkservices.com/bios.htm">PPK Team</A></li>
<li>&#187;<A href="http://www.ppkservices.com/credos.htm">Business Credos</A></li>
<li>&#187;<A href="http://www.ppkservices.com/">For Sellers</A></li>
<li>&#187;<A href="http://www.ppkservices.com/">For Buyers</A></li>
<li>&#187;<A href="http://www.ppkservices.com/contact.htm">Contact PPK</A></li>
</ul>
</TD>
<TD width=400>
<IMG height=265 alt="PPK Asset Services, LLC" src="PPK Asset Services, LLC_files/uslndfrm3.jpg" width=400 border=0>
</TD>
<TD width=150 valign="top">
<center>
<div style="text-align:center;font-weight:bold;font-family:Arial;color:#ffffff;background-color:#000000;margin-top:20px">Most Recent Auction</div>

<div style="position:relative; width:150px;border:1px solid white">
<div id="center_div" style="position:absolute;left:0;width:150px;height:150px;clip:rect(0,150,150,0)">

<div id="div_one" style="position:absolute; left:150px; top:0px">
<img src="" id="pic_one" width="150px" height=150 alt="1" onclick="goHere()"></div>

<div id="div_two" style="position:absolute; left:150px; top:0px">
<img src="" id="pic_two" width="150px" height=150 alt="2" onclick="goHere()"></div>
</div>

<div id="text_display" style="margin-top:160px"></div>
</div>
</TD>
</TR>
<tr>
<TD width=700 colspan="3" style="background-color:#000000">
<div style="text-align:center;font-weigh:bold;font-family:Arial;color:#ffffff;font-size:30px">Agricultural-Commercial-Recreational</div></TD>
</tr>
</TBODY>
</TABLE>
</CENTER>

</BODY>
</HTML>

sweetonez
02-28-2006, 11:36 PM
Well, once again, miracles have been performed. ;-)
The lack of comma after the last picture shown was such an obvious bit of info, I can't believe I missed it. I'm sorry for asking such a silly question!
The location change to send browsers to the url in the same window worked perfectly.
The only trouble I had was in altering the window position and width, etc. It just isn't browser compatable with Firefox. I've no idea what it does in Netscape, so I left it as it was originally. It still looks great. It messed with the highlight a bit as well, but that could be fixed. I just need to fit as many browsers as possible.
I want to thank you once again for all your help. If you have any suggestions or addendums, let me know.
Your help has been invaluable to me. If there's anything I can do..let me know!

Mr J
03-01-2006, 02:05 PM
When you say

The only trouble I had was in altering the window position and width

do you mean when you resize the window?

Problems like this usually arise when you use fixed widths.

when you asked


If I want to alter the width of the cell (and, in effect, the entire table), how can I center the rotating picture within that cell

When I made the td cell containing the image wider I was able to center it within that cell, this worked, and looked ok in IE6, Mozilla, Firefox, and NS7, as per my last example script



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum