<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>  
  <script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>  
  <script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>

<script language="javascript" type="text/javascript">  
window.addEvents({  
'domready': function(){  
/* thumbnails example , div containers */  
new SlideItMoo({  
overallContainer: 'SlideItMoo_outer',  
elementScrolled: 'SlideItMoo_inner',  
thumbsContainer: 'SlideItMoo_items',  
itemsVisible:3,  
itemsSelector: '.SlideItMoo_element',  
itemWidth: 158,  
showControls:1});  

}  
});  
</script>

<div id="SlideItMoo_outer">  
<div id="SlideItMoo_inner">  
<div id="SlideItMoo_items">  
<div class="SlideItMoo_element"></p>  
  <p> <strong>1: Address</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/address_128.png" /></a>  
  Nam porta tellus ac urna  
  </div>  
  <div class="SlideItMoo_element">  
  <strong>2: Ads</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/ads_128.png" /></a></p>  
  <p> Praesent pellentesque eros nec nisl  
  </div>  
  <div class="SlideItMoo_element">  
  <strong>3: Calendar</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/calendar_128.png" /></a>  
  Vestibulum eleifend scelerisque purus  
  </div>  
  <div class="SlideItMoo_element"></p>  
  <p> <strong>4: Comment</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="http://www.ruseller.com/" /></a>  
  Felis nulla iaculis lacus  
  </div>  

  <div class="SlideItMoo_element">  
  <strong>5: Home</strong>  
  <a href="http://www.ruseller.com/" target="_blank"></p>  
  <p> <img src="gallery/thumb/home_128.png" /></a>  
  Quisque neque. Donec quam ante, pulvinar vitae  
  </div>  

  <div class="SlideItMoo_element">  
  <strong>6: Mail</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/mail_128.png" /></a>  
  Suspendisse sodales turpis. Aliquam lectus  
  </div></p>  
  <p> <div class="SlideItMoo_element">  
  <strong>7: News</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/news_128.png" /></a>  
  Praesent pellentesque eros nec nisl  
  </div>  
  <div class="SlideItMoo_element">  
  <strong>8: RSS</strong></p>  
  <p> <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/rss2_128.png" /></a>  
  Nam porta tellus ac urna  
  </div>  
  <div class="SlideItMoo_element">  
  <strong>9: Search</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/search_128.png" /></a>  
  Praesent pellentesque eros nec nisl  
  </div></p>  
  <p> <div class="SlideItMoo_element">  
  <strong>10: Sign</strong>  
  <a href="http://www.ruseller.com/" target="_blank">  
  <img src="gallery/thumb/sign_128.png" /></a>  
  Vestibulum eleifend scelerisque purus  
  </div>  
  </div>  
  </div>  
  </div>  
  

<link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

<script language="javascript" type="text/javascript">  
window.addEvents({  
'domready': function(){  
   
  /* banner rotator example */  
  new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer',  
  elementScrolled: 'SlideItMoo_banners_inner',  
  thumbsContainer: 'SlideItMoo_banners_items',  
  itemsVisible:1,  
  itemsSelector: '.banner',  
  showControls:0,  
  autoSlide: 3000,  
  transition: Fx.Transitions.Bounce.easeOut,  
  duration: 1800,  
  direction:-1});  

  }  
  });  
  </script>

<div id="SlideItMoo_banners_outer">  
<div id="SlideItMoo_banners_inner">  
<div id="SlideItMoo_banners_items">  
<a class="banner" href="#" target="_blank"><img src="banners/1.jpg" width="557" height="134" /></a>  
<a class="banner" href="#" target="_blank"><img src="banners/2.jpg" width="557" height="134" /></a>  
<a class="banner" href="#" target="_blank"><img src="banners/3.jpg" width="557" height="134" /></a>  
</div>  
</div>  
</div>

<script language="javascript" type="text/javascript">  
window.addEvents({  
'domready': function(){  
/* thumbnails example , div containers */  
  /* info rotator example */  
  new SlideItMoo({overallContainer: 'SlideItMoo_info_outer',  
  elementScrolled: 'SlideItMoo_info_inner',  
  thumbsContainer: 'SlideItMoo_info_items',  
  itemsVisible:1,  
  itemsSelector: '.info_item',  
  itemWidth:557,  
  showControls:0,  
  autoSlide: 5000,  
  transition: Fx.Transitions.Sine.easeIn,  
  duration: 1800,  
  direction:1});  
  }  
  });  
  </script>

<div id="SlideItMoo_info_outer">  
<div id="SlideItMoo_info_inner">  
<div id="SlideItMoo_info_items">  
<div class="info_item">  
  <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/"><img src="info_images/chained_select.jpg" /></a>  
  <h1>Chained drop down boxes, the neat way</h1>  
  Ever had a problem displaying the relationships of hierarchical data? Tons of drop downs displaying data according to what the user selected? Not any more. ChainedSelect comes to your aid with a neat display of your data. Easy to use and to implement.  
  <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/">more details</a>  
  </div>  
  <div class="info_item">  
  <h1><a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/"><img src="info_images/moo_sifr-300x154.jpg" /></a>MooTools and SiFR - cool, antialiased text</h1>  
  Tired of the same boring look of your text? With the help of this script, your titles will look neat! Try it out.  
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/">more details</a>  
  </div>  
  <div class="info_item">  
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/"><img src="info_images/moohover-300x139.jpg" /></a>  
  <h1>MooHover - cool looking links and buttons</h1>  
  How about some cool hover effects on your links and buttons? You want it? You got it!  
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/">more details</a>  
  </div>  
  <div class="info_item">  
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/"><img src="info_images/zoomer-225x300.jpg" /></a>  
  <h1>MooTools image zoom</h1>  
  Got really large images that your client wants you to use? No room in the page for them? Need a solution? Got one! Go get it tiger!  
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/">more details</a>  
  </div>  
  </div>  
  </div>  
  </div>