Make your own free website on Tripod.com
Last Modified :
Layer

คือ การนำเอาวัตถุ (Object) มาซ้อนทับกัน โดย Object ดังกล่าว อาจเป็นตัวอักษร หรือภาพกราฟฟิกก็ได้

การทำ Layer สามารถทำได้ 2 วิธี คือ

1. ใช้แท็ก <layer>..</layer> และ <ilayer>..</ilayer> ซึ่งทั้งสองแท็กนี้เป็นแท็กที่คิดค้นขึ้นโดย Netscape
ดังนั้น แท็กทั้งสองชุดจึงใช้ได้กับเฉพาะ Netscape เท่านั้น IE ไม่เข้าใจคำสั่งชุดนี้

2. ใช้ชุดคำสั่งของ CSS Layer คือ <div style>.. </div> และ <span style>.. </span> สามารถใช้ได้กับ
ทั้ง IE และ Netscape
ซึ่งเป็นเรื่องที่น่าแปลกใจมาก เพราะโดยปกติแล้ว Netscape ไม่ค่อยจะรับรู้คำสั่งของ CSS
แต่ทีสำหรับเรื่อง Layer ดันสามารถแสดงข้อมูลออกมาได้อย่างถูกต้องเหมือนกับ IE

แล้วอย่างนี้จะมีใครไปใช้ชุดคำสั่งของวิธีที่ 1. หล่ะ? (น่าสงสาร Netscape จัง)

รูปแบบการใช้คำสั่ง

1. <layer id="layer1" left="20" top="10" width="100" height= "50" z-index="1">
... </layer>

2. <div id="Layer1" style="position:absolute; left:20; top:10; width:100; height:50; z-index:1">
... </div>

ความหมาย คือ

- กำหนดให้ layer ชื่อ layer1 (เปลี่ยนแปลงได้ตามใจชอบ)
- เริ่มพิกัดที่ตำแหน่งนับจากซ้าย 20 pixel นับจากบน 10 pixel
- มีขนาดความกว้าง 100 pixel สูง 50 pixel
- z-index ใช้แสดงเลขที่ชั้น โดยชั้นที่มีเลขมากที่กว่าจะอยู่เหนือกว่าชั้นที่มีเลขน้อยกว่า
- ในกรณีที่ไม่ได้กำหนดค่าของ z-index คำสั่งไหนมาทีหลัง คำสั่งนั้นจะอยู่บนสุด

ตัวอย่าง

ใช้คำสั่ง <layer> .. </layer>

<layer id="five" left="90" top="110" width="96" height="100" z-index="1">
<img scr="../images/5.gif" width="96" height="100">
</layer>
<layer id="two" left="150" top="60" width="96" height= "100" z-index="2">
<img scr="../images/2.gif" width="96" height="100">
</layer>



ใช้คำสั่ง <div style> .. </div>

<div id="five" style="position:absolute; left:90; top:110; width:96; height:100; z-index:1">
<img scr="../images/5.gif" width="96" height="100">
</div>
<div id="two" style="position:absolute; left:150; top:60; width:96; height:100; z-index:2">
<img scr="../images/2.gif" width="96" height="100">
</div>



มีตัวอักษรผสมเข้ามาด้วย

<div id="five" style="position:absolute; left:90; top:110; width:96; height:100; z-index:1">
<img scr="../images/5.gif" width="96" height="100">
</div>
<div id="two" style="position:absolute; left:150; top:60; width:96; height:100; z-index:3">
<img scr="../images/2.gif" width="96" height="100">
</div>
<div id="test" style="position:absolute; left:75; top:116; width:250; height:45; z-index:2">
<font color="#00FF00">ทดสอบการซ้อนทับกันของเลเยอร์ 3 เลเยอร์.</font>
</div>



มีแอตทริบิวท์ของชุดคำสั่งเรื่อง Layer อีกแอตทริบิวท์หนึ่งที่สำคัญ คือ "แสดงผล/ซ่อนเอาไว้"

<layer> .. </layer> ใช้ visibility = "show" หรือ "hide"
<div style> .. </div> ใช้ visibility = "visible" หรือ "hidden"
ถ้าไม่ได้กำกับเอาไว้ ค่า default ของชุดคำสั่งเหล่านี้ จะแสดงผล ( show / visible )

หนังสือบางเล่มเขียนไว้ว่า สำหรับการซ่อน/แสดง ให้ใช้คำสั่ง vpignore = ["true"/"false"] ใน <div style>
ผมลองดูแล้ว ไม่เวอร์ค

ตัวอย่างการซ่อน Layer

<layer id="five" left="90" top="110" width="96" height="100" z-index="1" visibility="hide">
<img scr="../images/5.gif" width="96" height="100">
</layer>

<div id="five" style="position:absolute; left:90; top:110; width:96; height:100; visibility="hidden"; z-index:1>
<img scr="../images/5.gif" width="96" height="100">
</div>

ประโยชน์ของแอตทริบิวท์นี้ ส่วนใหญ่จะนำไปใช้ร่วมกับ แอตทริบิวท์ onMouseover, onMouseout

ว่ากันด้วยเรื่องของ position

เรื่องนี้ต้องขยาย เพราะเท่าที่ผมอ่านหนังสือมาตั้งหลายเล่ม เกือบทุกเล่ม เมื่อพูดถึงเรื่อง position มักจะใช้ในรูปแบบ
ของ

position : absolute;

เกือบทั้งนั้น ที่จริงแล้ว position สามารถใช้ได้ 3 รูปแบบ คือ

position : absolute;
position : relative;
position : static;

absolute เป็นการจัดตำแหน่ง โดยการระบุพิกัดของเวบเพจโดยตรง (มีผลกับการใช้คู่กับ left, top, z-index)
relative เป็นการจัดตำแหน่ง โดยการถือเอาจุดเริ่มต้นนับจากตำแหน่งขององค์ประกอบที่อยู่ก่อนหน้านี้ในซอร์ซโค้ด
ของเวบเพจเป็นหลัก (มีผลกับการใช้คู่กับ left, top, z-index)
static เป็นการจัดตำแหน่งแบบเวบเพจธรรมดา สนใจเฉพาะคำสั่งที่อยู่ก่อนหน้านั้นเท่านั้น (ไม่มีผลกับการใช้คู่กับ
left, top, z-index)

แต่ไม่ว่าจะเป็น Position แบบบไหนก็ตาม ล้วนมีผลต่อการใช้คู่กับ width, hight และ visibility ทั้งสิ้น

มาดูตัวอย่างกัน สมมุติว่า Source Code ในเวบเพจหนึ่ง เขียนไว้ว่า

<body>
จุดเริ่มต้นการทดสอบ
<br>
<br>
<br>
1234567890<br>
<div id="one" style="position:absolute; left:100px; top:80px; width:250; height:45px; z-index:1">
<font color="FF0000">หนึ่ง</font></div>
<div id="two" style="position:relative; left:100px; top:80px; width:250; height:45px; z-index:2">
<font color="00FF00">สอง</font></div>
<div id="three" style="position:static; left:100px; top:80px; width:250; height:45px; z-index:3">
<font color="0000FF">สาม</font></div>



อธิบาย

1. การใช้ absolute (ตัวหนังสือสีแดง) จะเริ่มนับจากมุมด้านซ้ายมือเป็นหลัก
2. การใช้ relative (ตัวหนังสือสีเขียว) จะเริ่มนับจากก่อนหน้าเลข 1. เป็นหลัก
3. การใช้ static (ตัวหนังสือสีน้ำเงิน) ไม่สนใจตำแหน่งเริ่มต้น แต่มองเห็นว่า สอง. เป็นข้อมูลที่อยู่หน้าตน และเป็นพวก
เดียวกับตน จีงทำการเว้นระยะห่างจากบรรทัด 12345.. เท่ากับระยะความสูงของ layer ของ สอง (45px) ซึ่งในขณะ
เดียวกันกลับมองไม่เห็น หนึ่ง อยู่ในสายตา ถือว่าเป็นคนละพวกกัน จึงไม่ได้เว้นที่ไว้ให้

ความแตกต่างของข้อ 3. ระหว่าง IE กับ Netscape
- ถ้าใช้ IE ข้อ 3. ผมอธิบายถูกต้องแล้ว
- แต่ถ้าใช้ Netscape --> static จะเห็น หนึ่ง เป็นพวกเดียวกันด้วย คือ จะเว้นระยะจากบรรทัด 123... ไว้ให้ 90px

ขอให้สังเกตุให้ดีๆนะครับ

1. static มี z-index=3 แต่ไม่ได้ไปอยู่ชั้นบนสุด ในขณะเดียวกันกลับถูกพวก absolute และ relatieve ซ้อนทับเอา
เสียด้วย นั่นคือ position : static ไม่มีความสามารถด้านการซ้อนทับ
2. แต่ position : static กลับมีความสามารถด้าน "แสดง/ซ่อน"