<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <link rel="stylesheet" href="styles.css" type="text/css" /> <style type="text/css"> body { font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:12px; color:#333; padding:0px; margin:0 auto; background-color: #E6E6E6; } h2 { color:#333; font-weight: normal; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; } #content { overflow:hidden; margin:0 auto; width:100%; padding-top:18px; padding-bottom:20px; margin-bottom:10px; background-color: #FFFFFF; border-left:1px #666 solid; border-right:1px #666 solid; border-bottom:1px #666 solid; } #boardContent { float:left; text-align:left; width:100%; padding: 0px 10px 0px 10px; border-left: 1px solid #D8DFEA; border-right: 1px solid #D8DFEA; } #mainPage { width:100%; height: 100%; padding: 10px 10px 0px 10px; } </style> <title>Uniboard</title> <script type="text/javascript"> var currentPageIndex = 0; function bodyonload(){ selectPage(0); } function getPageUrlForIndex(pageIndex) { var pageUrl = "page"; if(pageIndex < 9) pageUrl += "00"; else if(pageIndex < 99) pageUrl += "0"; pageUrl += (pageIndex + 1) + ".svg" return pageUrl; } function getThumbUrlForIndex(pageIndex) { var pageUrl = "page"; if(pageIndex < 9) pageUrl += "00"; else if(pageIndex < 99) pageUrl += "0"; pageUrl += (pageIndex + 1) + ".thumbnail.jpg" return pageUrl; } function selectPage(pageIndex) { currentPageIndex = pageIndex; loadPage('mainPage', getPageUrlForIndex(pageIndex)); var i; for (i = 0; i < 4; i++) { loadThumb("thumb" + (i + 1), getThumbUrlForIndex(pageIndex + i)); } } function loadPage(target, url) { var mainPage = window.document.getElementById(target); mainPage.style.opacity = .0; mainPage.data = url; var speed = 50; var timer = 0; //fade in page for(i = 0; i <= 10; i++) { setTimeout("changeOpac(" + i * 10 + ", '" + target + "')",(timer * speed)); timer++; } } function loadThumb(target, url) { var thumb = window.document.getElementById(target); thumb.src = url; } function previousPage(){ if (currentPageIndex > 0) selectPage(currentPageIndex - 1); } function nextPage(){ selectPage(currentPageIndex + 1); } //change the opacity for different browsers function changeOpac(opacity, id) { var object = document.getElementById(id).style; var pc = (opacity / 100); object.opacity = pc; object.MozOpacity = pc; object.KhtmlOpacity = pc; object.filter = "alpha(opacity=" + opacity + ")"; } </script> </head> <body onLoad="bodyonload()"> <div id="container"> <div id="content"> <div id="boardContent"> <div> <table> <tr> <td><h2><div onClick="previousPage()"><</div></h2></td> <td><h2><div onClick="nextPage()">></div></h2></td> </tr> </table> <table> <tr> <object id="mainPage" class="uniboardPage" type="image/svg+xml" name="mainPage" width="100%" /> </tr> <!-- <tr> <td width="25%"> <img id="thumb1" class="thumbnail" type="image/jpg" name="thumb1" width="100%"/> </td> <td width="25%"> <img id="thumb2" class="thumbnail" type="image/jpg" name="thumb2" width="100%"/> </td> <td width="25%"> <img id="thumb3" class="thumbnail" type="image/jpg" name="thumb3" width="100%"/> </td> <td width="25%"> <img id="thumb4" class="thumbnail" type="image/jpg" name="thumb4" width="100%"/> </td> </tr> --> </table> </div> </div> </div> </body> </html>