topical media & game development

talk show tell print

#javascript-css-fader-demo.htm / htm



  <head>
  <style>
  div.cf_wrapper {
    position: relative;
    left: 30%;
  }
          
  div.cf_element {
                  width: 400px;
                  background-color: #eee;
                  border: 1px solid #ccc;
  }
          
  div.cf_element div.content {
                  padding: 10px;
  }
  
  div.cf_element div.content h3 {
                  padding-top: 0;
                  margin-top: 0;
  }
  </style>
  
  <script type="text/javascript" src="javascript-css-fader-script.js"></script>
  </head>
  <body>
  
  <div class="cf_wrapper">
  
                  <div class="cf_element" id="cf1">
                          <div class="content">
                                  <h3>Element 1</h3>
                                  <p>Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii <a href="#">legunt saepius claritas</a> est etiam processus dynamicus qui.</p>
                          </div>
                  </div>
  
                  <div class="cf_element" id="cf2">
                          <div class="content">
                                  <h3>Element 2</h3>
                                  <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua <strong>franca va esser</strong> plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A <em>un Angleso it va semblar un</em> simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
                          </div>
                  </div>
  
                  <div class="cf_element" id="cf3">
                  <div class="content">
                                  <h3>Element 3</h3>
  <p style="text-align: center;">
  <img src="soutine.jpg" width="200" height="150"><br>
  Iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me. Usus legentis in lius quod ii legunt saepius claritas est etiam processus dynamicus qui. <a href="#">Littera gothica quam!</a></p>
                          </div>
                  </div>
  
  </div>
  
  <script type="text/javascript">
  <!--
           var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
  -->
  </script>
  
  </body>
  
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.