<script type="text/javascript"> function show(Me) { var section = Me.parentNode; var menu = section.parentNode; for(var i = 0; i < menu.childNodes.length; i++) { if (menu.childNodes[i].length == 0) continue; if (typeof menu.childNodes[i].style != 'object') continue; menu.childNodes[i].style.width = '2em'; menu.childNodes[i].style.background = 'url(../../images2/winmback.jpg) #B4E9FF repeat-y'; menu.childNodes[i].style.color = '#000'; } section.style.width = '20em'; section.style.background = "url(../../images2/winmback2.jpg) #00E0FF repeat-y"; section.style.color = '#ff0000'; return true; } function showfirst() { if (!document.getElementsByTagName) return; var a = document.body.getElementsByTagName("div"); for (i = 0; i < a.length; i++) { if (a[i].id == "flyout") { if (typeof a[i].style != 'object') continue; var x = a[i].getElementsByTagName("h2"); for (j = 0; j < x.length; j++) { if (x[j].className == "showfirst") { if (typeof x[j].style != 'object') continue; show(x[j]); return; } } } } } window.onload=showfirst; </script> <style> h2 { font-weight: normal; font-size: 1.4em; clear: both; } body > h2 { clear: none;} .section h2 { cursor: pointer; } #flyout .section { float: left; width: 20em; height: 25em; background: url('../../images2/winmback.jpg') #444 repeat-y; margin-left: 0; color: white; padding: 0; overflow: hidden; } #flyout h2 { font-family: monospace; width: 1em; font-size: 1.2em; padding-top: 1ex; float: left; padding-left: 1ex; padding-right: 0.2ex; height: 100%; clear: none; position: relative; } #flyout .section div { margin-left: 2em; padding: 1em; background: #B4E9FF; color: black; height: 100%; border-bottom: solid 1px #777; border-right: solid 1px #777; border-top: solid 1px #ccc; } #flyout + * { clear: both; } </style>

<div id="flyout"> <!-- เริ่ม Section ที่ 1 --> <div class="section" > <!-- บรรทัดด้านล่างคือข้อความตรงที่คั่นหนังสือ ให้พิมพ์ภาษาอังกฤษเท่านั้น และ ตัวเว้นตัวด้วย --> <h2 onclick="show(this);" class="showfirst">w e l c o m e</h2> <div> <h3>WELCOME TO MY HOMEPAGE</h3> <p>ยินดีต้อนรับครับ</p> </div> </div> <!-- จบ Section ที่ 1 --> <!-- เริ่ม Section ที่ 2 --> <div class="section"> <h2 onclick="show(this);">T i t l e 2</h2> <div> <h3>หัวข้อที่ 2</h3> <p>ข้อความ 2</p> </div> </div> <!-- จบ Section ที่ 2 --> <!-- เริ่ม Section ที่ 3 --> <div class="section"> <h2 onclick="show(this);">T i t l e 3</h2> <div> <h3>หัวข้อที่ 3</h3> <p>ข้อความ 3</p> </div> </div> <!-- จบ Section ที่ 3 --> <!-- เริ่ม Section ที่ 4 --> <div class="section"> <h2 onclick="show(this);">T i t l e 4</h2> <div> <h3>หัวข้อที่ 4</h3> <p>ข้อความ 4</p> </div> </div> <!-- จบ Section ที่ 4 --> </div>