<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="javascript/Slideshow.js"></script> <script type="text/javascript"> /* $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, nextId: "slider1next", prevId: "slider1prev" }); $("#slider2").easySlider({ auto: true, continuous: true, numeric: true }); }); */ </script> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Arial, sans-serif; } div#tmpSlideshow { margin: 10px; padding: 30px 0 0 0; position: relative; height: 335px; width: 867px; border: 1px solid rgb(200, 200, 200); } div.tmpSlide { position: absolute; top: 0; left: 0; width: 867px; height: 332px; display: none; } div.tmpSlide img { float: left; margin: 30px 0 0 15px; width: 580px; border: 1px solid rgb(244, 244, 244); } div#tmpSlideshowControls { position: absolute; bottom: 10px; left: 15px; width: 275px; } div.tmpSlideshowControl { border: 1px solid #e1dece; float: left; margin: 0 5px 0 0; padding:0px 0px 0px 0px; background: url('images/form/Feature.png') no-repeat; width: 15px; height: 15px; color: #554d31; font: 11px tahoma; text-align: center; cursor: pointer; } div.tmpSlideshowControl span { line-height: 15px; vertical-align: middle; } div.tmpSlideshowControlOn { background-image: url('images/form/FeatureOver.png'); } div.tmpSlideshowControlActive { border: 1px solid #0066CC; color:#0066CC; } div.tmpSlideCopy { position: absolute; left: 615px; top: 20px; width: 250px; } div#tmpSlideshow h4 { color: #b90f23; text-transform: uppercase; font: 14px Arial, sans-serif; margin: 10px 0; } div.tmpSlideCopy p { font: 11px Arial, sans-serif; line-height: 1.75em; }--> </style></head> <title>Untitled Document</title> </head><body> <div id='tmpSlideshow'> <div id='tmpSlide-1' class='tmpSlide'> <img src='images/form/01.jpg' alt='Slide' /> <div class='tmpSlideCopy'> <h4>ยินดีต้อนรับ</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero. </p> </div> </div> <div id='tmpSlide-2' class='tmpSlide'> <img src='images/form/02.jpg' alt='Slide' /> <div class='tmpSlideCopy'> <h4>Ut et leo ut quam</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero. </p> </div> </div> <div id='tmpSlide-3' class='tmpSlide'> <img src='images/form/03.jpg' alt='Slide' /> <div class='tmpSlideCopy'> <h4>Sed sapien quam</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero. </p> </div> </div> <div id='tmpSlide-4' class='tmpSlide'> <img src='images/form/04.jpg' alt='Slide' /> <div class='tmpSlideCopy'> <h4>Sed sapien quam</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero. </p> </div> </div> <div id='tmpSlide-5' class='tmpSlide'> <img src='images/form/05.jpg' alt='Slide' /> <div class='tmpSlideCopy'> <h4>Sed sapien quam</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, faucibus eget libero. </p> </div> </div> <div id='tmpSlideshowControls'> <div class='tmpSlideshowControl' id='tmpSlideshowControl-1'><span>1</span></div> <div class='tmpSlideshowControl' id='tmpSlideshowControl-2'><span>2</span></div> <div class='tmpSlideshowControl' id='tmpSlideshowControl-3'><span>3</span></div> <div class='tmpSlideshowControl' id='tmpSlideshowControl-4'><span>4</span></div> <div class='tmpSlideshowControl' id='tmpSlideshowControl-5'><span>5</span></div> </div> </div> </body> </html>