Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotating Banner issue.

    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>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

    PHP Code:

    <HTML
    <
    HEAD
    <
    TITLE>PPK Asset ServicesLLC</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=
    speed
    =
    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=
    divNum
    =
    runRate
    =50 
    moveLeft
    () 


    function 
    moveLeft(){
    nextUrl=nextPic

    if(divNum==1){ 
    elPos=parseInt(elOne.style.left
    elOne.style.zIndex=

    else{ 
    elPos=parseInt(elTwo.style.left
    elTwo.style.zIndex=


    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=


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

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

    divNum=
    }


    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>»<A href="http://www.ppkservices.com/">PPK Home</A></li> 
    <li>»<A href="http://www.ppkservices.com/abbott.htm">Current Auctions</A></li> 
    <li>»<A href="http://www.ppkservices.com/aboutppk.htm">About PPK</A></li> 
    <li>»<A href="http://www.ppkservices.com/about.htm">Services Offered</A></li> 
    <li>»<A href="http://www.ppkservices.com/bios.htm">PPK Team</A></li> 
    <li>»<A href="http://www.ppkservices.com/credos.htm">Business Credos</A></li> 
    <li>»<A href="http://www.ppkservices.com/">For Sellers</A></li> 
    <li>»<A href="http://www.ppkservices.com/">For Buyers</A></li> 
    <li>»<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> 
    Last edited by Mr J; 02-27-2006 at 05:54 PM. Reason: Amended and added to the script
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotating Banner Issue

    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"]
    ]

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    THANKYOU! And...

    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!!

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

    PHP Code:
    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.

    PHP Code:
    <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

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>PPK Asset ServicesLLC</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=
    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=
    elTwo
    .style.zIndex="" 
    elOne.style.left=elCenter.offsetWidth+spacer 

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

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


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

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

    divNum=






    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>»<A href="http://www.ppkservices.com/">PPK Home</A></li>
    <li>»<A href="http://www.ppkservices.com/abbott.htm">Current Auctions</A></li>
    <li>»<A href="http://www.ppkservices.com/aboutppk.htm">About PPK</A></li>
    <li>»<A href="http://www.ppkservices.com/about.htm">Services Offered</A></li>
    <li>»<A href="http://www.ppkservices.com/bios.htm">PPK Team</A></li>
    <li>»<A href="http://www.ppkservices.com/credos.htm">Business Credos</A></li>
    <li>»<A href="http://www.ppkservices.com/">For Sellers</A></li>
    <li>»<A href="http://www.ppkservices.com/">For Buyers</A></li>
    <li>»<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> 
    Last edited by Mr J; 02-28-2006 at 06:21 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •