Article
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 


   

การใช้ DIV สร้างเลเยอร์ ตอนที่ 5 : Layer ซ้อนใน Layer

โดย สรวุฒิ กอสุวรรณศิริ

ความรู้อีกอย่างหนึ่งที่คุณควรจะเรียนรู้ไว้ก็คือการใช้เลเยอร์ ซ้อนในเลเยอร์ เทคนิคนี้สามารถใช้ทำกล่องแสดงข้อความ แบบเดียวกับที่สร้างได้ด้วย แท็ก <maquee > นั่นแหละครับ แต่ marquee นั้นสามารถใช้ได้ใน IE เท่านั้น และมีความสามารถเพียงแค่ที่ถูกเตรียมไว้ให้เท่านั้น ไม่เหมือนกับ การใช้เลเยอร์ เขียนสคริปต์เอง ซึ่งจะสนับสนุนทั้ง 2 Browser และสามารถพัฒนาให้ ตรงกับความต้องการ ของคุณได้ แต่อย่าเพิ่งคิดถึงประโยชน์ของมันดีกว่า เพราะผมตั้งใจสอนให้คุณ นำความรู้นี้ไปใช้ตามสถานการณ์ ไม่ใช่แค่เอาไปเขียน Script นี้ได้ก็จบ เพราะฉะนั้น ตอนนี้เรามาดูคอนเซปต์ของการใช้เลเยอร์ซ้อนในเลเยอร์กันก่อนดีกว่าครับ

แนวคิดการทำเลเยอร์ซ้อนเลเยอร์

ขออธิบายศัพท์กันก่อน เวลาทำเลเยอร์ซ้อนเลเยอร์ แน่นอนว่าจะต้องมีอย่างน้อย 2 เลเยอร์ โดยมีเลเยอร์หนึ่งสร้างแบบปกติ แต่อีกเลเยอร์หนึ่ง ถูกสร้างภายในส่วนที่เป็นเลเยอร์แรก ผมขอเรียกเลเยอร์ที่เป็นชั้นนอกว่า Parent Layer และเลเยอร์ที่อยู่ภายในว่า child layer นะครับ การทำเลเยอร์ซ้อนเลเยอร์ เมื่อ Parent Layer ถูกคลิปเพื่อกำหนดขอบเขตแล้ว ก็จะสามารถซ่อนบางส่วนของ child Layer ไม่ให้ผู้ใช้มองเห็นได้ ดังรูป

วิธีสร้างเลเยอร์ซ้อนเลเยอร์ด้วย HTML และ CSS

การสร้างเลเยอร์ซ้อนเลเยอร์ก็คล้ายๆกับการสร้างตารางซ้อนตารางครับ เขียนโค้ดของ child layer ซ้อนใน parent layer ได้เลย

<DIV ID="parent1Div">
<DIV ID="child1Div"></DIV>
<DIV ID="child2Div"></DIV>
</DIV>

แต่อย่าลืมกำหนด CSS ให้กับเลเยอร์พวกนี้นะครับ สำคัญมากโดยเฉพาะการคลิป parent layer ให้มีขนาดคงที่ ไม่งั้นมันจะแสดงข้อมูลทั้งหมดของ child layer ออกมา

<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:100; top:80; width:230; height:120; clip:rect(0,230,120,0); background-color:#C0C0C0; layer-background-color:#C0C0C0;}
#child1Div {position:absolute; left:-20; top:40; width:70; height:70; clip:rect(0,70,70,0); background-color:#FF0000; layer-background-color:#FF0000;}
#child2Div {position:absolute; left:180; top:70; width:70; height:70; clip:rect(0,70,70,0); background-color:#0000FF; layer-background-color:#0000FF;}
-->
</STYLE>
<DIV ID="parent1Div">
<DIV ID="child1Div"></DIV>
<DIV ID="child2Div"></DIV>
</DIV>

ดูตัวอย่างเลเยอร์ซ้อนเลเยอร์

การใช้ JavaScript ติดต่อกับ child layer

ทีนี้ก็มาถึงส่วนสำคัญ การที่เราจะนำไปประยุกต์ใช้ ก็ต้องใช้ JavaScript แต่เราจะใช้ JavaScript ติดต่อกับเลเยอร์ที่อยู่ภายในได้อย่างไร ? สำหรับใน IE มีรูปแบบเหมือนกับการติดต่อกับ Parent Layer เลยครับ

childLayer.style.properyName

แต่ใน Netscape นั้น มีรูปแบบที่แตกต่างกัน มันจะต้องอ้างอิงจาก Parent layer เข้าไป มันจะถือว่า child layer เป็นส่วนหนึ่งของ document ของ parent layer ดังนั้นจึงมีรูปแบบดังนี้

document.parentLayer.document.childLayer.propertyName

ดังนั้น ในกรณีที่มีการซ้อนกันมากกว่า 1 ชั้น เช่น ถ้ามี child2Div ซ้อนอยู่ใน child1Div ซึ่ง child1Div ก็ซ้อนอยู่ใน parentLayer ก็สามารถอ้างอิงถึง child2Div ใน Netscape ได้ดังนี้ครับ (จากหลักการ child layer เป็นส่วนหนึ่งของ document ของ parent layer)

document.parent1Div.document.child1Div.document.child2Div.propertyName

จบแล้วครับ แหมง่ายจัง อ่านจบแล้วลองเอาไปใช้ดูนะครับ ผมเชื่อมั่นว่าคุณผู้อ่านสามารถประยุกต์เป็น Script จ๊าบๆได้แน่นอน

Back to top





© copyright 2001 Sorrawut Korsuwansiri