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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    48
    Thanks
    5
    Thanked 2 Times in 2 Posts

    rotating image script

    hi all,

    currently i have a basic javascript rotating image script on my client's front page (see here: http://www.allisonwrote.com/aussie/).

    i think it would look more professional to do a crossfading of images, so they fade into each other. this javascript-ing (http://slayeroffice.com/code/imageCrossFade/xfade2.html) looks good, but i'm just wondering how to implement it because it works with css as well. i'm very new to javascript, and i'm sure i can figure it out on my own, but was just looking for some advice before i mess anything up.

    thanks,

    x
    allison

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there allisonwrote,

    I have reworked your page, it may suit your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
    <title>Australian Landscaping and Construction</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="copyright" content="Australian Landscaping and Construction"/>
    <meta name="author" content="Allison Cintins"/>
    <meta name="robots" content="index,follow"/>
    <meta name="description" content="Australian Landscaping and Construction"/>
    <meta name="keywords" content="Northern, Virginia, Landscaping, Home, Improvement, Construction, Class, A, Contractor, Northern Virginia, Northern Virginia Landscaping, Northern Virginia Home Improvement, Northern Virginia Construction, Northern Virginia Contractor, Northern Virginia Class A Contractor, Northern Virginia Home Construction, Northern Virginia Home Landscaping, Northern Virginia Home Contractor, Virginia Landscaping, Virginia Home Improvement, Virginia Construction, Virginia Contractor, Virginia Class A Contractor, Virginia Home Construction, Virginia Home Landscaping, Virginia Home Contractor, Home Landscaping, Home Construction, Home Contractor, Home Improvement, Construction Contractor, Home Improvement Contractor, Class A Contractor, Landscaping Construction, Landscaping Contractor"/>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    
    <script type="text/javascript">
      var objt;
      var objb;
      var topop=100;
      var botop=0;
      var speed=75;
      var topnum=0;
      var botnum=1;
      var test=0;
    
      var pics=new Array();
          pics[0]='http://www.allisonwrote.com/aussie/rotate/1.jpg';
          pics[1]='http://www.allisonwrote.com/aussie/rotate/2.jpg';
          pics[2]='http://www.allisonwrote.com/aussie/rotate/3.jpg';
          pics[3]='http://www.allisonwrote.com/aussie/rotate/4.jpg';
          pics[4]='http://www.allisonwrote.com/aussie/rotate/5.jpg';
    
    window.onload=function() {
      objt=document.getElementById('top');
      objb=document.getElementById('bot');
      fadeout();
    }
    function fadeout() {
    if(test==0) {
       topop--;
       botop++;
     }
    if(objt.filters) {
       objt.style.filter='alpha(opacity='+topop+')';
       objb.style.filter='alpha(opacity='+botop+')';
     }
    else {
       objt.style.opacity=topop/100;
       objb.style.opacity=botop/100;
     }
    if(topop==0){
       topnum+=2;
    if(topnum>pics.length-1){
       topnum=1; //if the number of images is odd change this value to 1;
     }
       objt.src=pics[topnum];
       test=1;
     }
    if(test==1){
       topop++;
       botop--;
     }
    if(topop==100){
       botnum+=2;
    if(botnum>pics.length-1){
       botnum=0; //if the number of images is odd change this value to 0;
     }
       objb.src=pics[botnum];
       test=0;
     }
    setTimeout('fadeout()',speed);
     }
    </script>
    	
    <style type="text/css">
    #topbot {
        width:448px;
        height:278px;
     }
    #top {
        position:absolute;
        z-index:1;
     }
    #bot {
        position:absolute;
        z-index:0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header" title="return to home" style="cursor:pointer;" onclick="window.location='/index.html';">
    </div>
    
    <div id="menu">
    <ul>
    <li><a class="chosen" href="/aussie/index.html/">Home</a></li>
    <li><a href="/aussie/services.html" title="Services">Services</a></li>
    <li><a href="/aussie/products.html" title="Products">Products</a></li>
    <li><a href="/aussie/examples.html" title="Examples">Examples</a></li>
    <li><a href="/aussie/people.html" title="Team">Team</a></li>
    <li><a href="/aussie/about.html" title="About">About</a></li>
    <li><a href="/aussie/links.html" title="Links">Links</a></li>
    <li><a href="/aussie/contact.html" title="Contact">Contact</a></li>
    </ul>
    </div>
    
    <div id="content">
    <p> 
    <span id="topbot" class="floatright">
    <img id="top" src="http://www.allisonwrote.com/aussie/rotate/1.jpg" alt=""/>
    <img id="bot" src="http://www.allisonwrote.com/aussie/rotate/2.jpg" alt=""/>
    </span>
    </p>
    
    <h3>G'day Mate!</h3>
    <p><b>Australian Landscaping and Construction</b> is ready to explore your ideas for transforming your home and Outback. With over 25 years experience in the Northern Virginia area, our friendly team of experts will work with you to realize your landscaping and/or home improvement vision. </p>
    <p>Please explore our website to learn more about us and to see examples of the work that we can produce for you. If you're ready to set up a free, friendly estimate, please contact us:</p>
    <p></p>
    <p class="close"> <strong>Phone: 703.278.0221</strong></p>
    <p class="close"> <strong>Fax: 703.278.0331</strong></p>
    <p class="close"> <strong>E-mail us at<a class="clink" href="mailto: australian@australianlandscaping.com"> australian@australianlandscaping.com</a></strong></p>
    <p><em> Australian Landscaping and Construction is an insured Virginia Class A contractor.</em></p>
    <img class="first" src="http://www.allisonwrote.com/images/bbb.jpg" alt=""/> 
    <img src="http://www.allisonwrote.com/images/bta.jpg" alt=""/> 
    <img src="http://www.allisonwrote.com/images/ncma_logo.jpg" alt=""/>
    </div>
    
    <div id="footer">
    <p class="foot"> Phone: 703.278.0221. Fax: 703.278.0331. E-mail:<a href="mailto: australian@australianlandscaping.com"> australian@australianlandscaping.com.</a> Website designed by <a href="http://www.allisonwrote.com/">Allison Cintins</a>. </p>
    </div>
    </div>
    
    </body>
    </html>
    
    I notice that you have four CSS errors that require your attention...
    coothead

  • Users who have thanked coothead for this post:

    allisonwrote (05-10-2008)

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    48
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Thank you so much! Sorry for the delay in responding.

    x
    allison

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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