Article

การใช้ DIV สร้างเลเยอร์ ตอนที่ 4 : การคลิปเลเยอร์

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

การคลิป ก็คือการการหนดขอบเขตการแสดงผลของเลเยอร์ ให้เห็นเฉพาะบางส่วน โดย ทั่วไปจะกำหนดพิกัดการคลิปเป็นเลข 4 ชุดคือ top right bottom left สำหรับวิธีการคลิปใน CSS นั้น มีรูปแบบดังนี้ครับ

clip:rect(top,right,bottom,left)

การใช้ JavaScript ติดต่อกับการคลิปเลเยอร์

การใช้ JavaScript ติดต่อกับการคลิปเลเยอร์ สำหรับใน Netscape มีรูปแบบดังนี้ครับ

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left

ดังนั้น ถ้าผมต้องการจะกำหนดให้ ขอบเขตด้านบนของการคลิป เป็น 40px ก็สามารถทำได้ดังนี้ครับ

document.divName.clip.top=40px

จะเห็นว่าใน Netscape ค่อนข้างสะดวก คือมันแยกบนล่างซ้ายขวาให้เราเสร็จ แต่ใน IE จะเก็บรวมกันงใน divName.style.clip เป็น String แบบนี้ครับ (ค่าสมมุตินะครับ)

"rect(0px 100px 50px 0px)"

ดังนั้น การอ่านค่าคลิปใน IE จะต้องอาศัยการตัด String ซึ่งผมจะขอเสนอวิธีการดังนี้

var clipv = divName.style.clip.split("rect(")[1].split(")")[0].split("px")

เห็นโค้ดแล้วอย่าเพิ่งงนะครับ คำสั่งที่ผมนำมาใช้คือ split ซึ่งจะตัด String เข้าไปใน Array โดยใช้สัญลักษณ์ที่กำหนดในพารามิเตอร์เป็นตัวคั่น ยังจำได้ไหมครับว่า divName.style.clip เป็น String ดังนั้น ส่วนแรกที่เราจะดูก็คือ

divName.style.clip.split("rect(")[1]

หมายความว่า ใช้ "rect(" แบ่ง String แน่นอนว่าจะแบ่งได้ 2 ส่วนคือ "" และ "0px 100px 50px 0px)" เลข [1] ที่ต่อท้ายหมายความว่า ให้เอาส่วนหลัง (ส่วน "0px 100px 50px 0px)") มาเป็นผลลัพธ์ ซึ่งมันก็เป็น String จึงนำมา Split ต่อได้

var clipv = divName.style.clip.split("rect(")[1].split(")")[0]

คราวนี้ผมนำผลลัพธ์จากการ Split ครั้งแรก มาทำการ Split อีกครั้ง เพื่อตัด ")" ทิ้งไป ที่นี่ก็จะเหลือแค่

"0px 100px 50px 0px"

ซึ่งผมจะเอามา Split ครั้งสุดท้าย โดยใช้ "px" เป็นตัวแบ่ง ก็จะได้ค่าทั้ง 4 ด้านไปเก็บไว้ในอาเรย์ clipv ถูกไหมครับ

เขียนฟังก์ชั่นเอาไว้ใช้เพื่อความสะดวกภายภาคหน้า

ทีนี้ผมจะนำความรู้ในเรื่องนี้มาเขียนเป็นฟังก์ชั่นเอาไว้ใช้ง่ายๆ เริ่มจากฟังก์ชั่นสำหรับอ่านค่าคลิป ฟังก์ชั่นนี้จะรับตัวแปรพ้อยเตอร์ หรือชื่อของ Layer และตัวอักษรย่อของส่วนที่ต้องการอ่านค่า (t - top,r - right,b - bottom,l - left) แล้วคืนค่ากลับมาเป็น ค่าของการคลิปในส่วนนั้น

function clipValues(obj,which) {
if (ns4) {
if (!obj.left) {obj=document.layers[obj]}
if (which=="t") return obj.clip.top
if (which=="r") return obj.clip.right
if (which=="b") return obj.clip.bottom
if (which=="l") return obj.clip.left
}
else if (ie4) {
if (!obj.left) {obj=document.all[obj].style}
var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
if (which=="t") return Number(clipv[0])
if (which=="r") return Number(clipv[1])
if (which=="b") return Number(clipv[2])
if (which=="l") return Number(clipv[3])
}
}

ทีนี้ก็มาถึงฟังก์ชั่น ที่ใช้สำหรับกำหนดค่าคลิป หรือ clipTo() ฟังก์ชั่นนี้ผมจะให้รับค่าเป็นพารามิเตอร์ 5 ตัว ตัวแรกเป็นตัวแปรพ้อยเตอร์ หรือไม่ก็ชื่อ Layer ที่ต้องการจะเซ็ต พารามิเตอร์อีก 4 ตัวที่เหลือก็คือค่าคลิปทั้ง 4 นั่นเอง การทำงานของฟังก์ชั่นนี้ก็คือ ถ้าเป็น netscape มันก็จะนำค่าทั้ง 4 เซ็ตลงไปตามปกติ แต่ถ้าเป็น IE ก็จะเอามารวมกันเป็น String ก่อน แล้วค่อยไปกำหนดในพรอเพอร์ตี clip อีกทีหนึ่ง ลองดูกันเลยดีกว่าครับ

function clipTo(obj,t,r,b,l) {
if (ns4) {
if (!obj.left) {obj=document.layers[obj]}
obj.clip.top = t
obj.clip.right = r
obj.clip.bottom = b
obj.clip.left = l
}
else {
if (ie4)
{
if (!obj.left) {obj=document.all[obj].style}

obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
}

}

สำหรับวันนี้ พอแค่นี้ก่อนครับ ในเรื่องการคลิปเลเยอร์ ในตอนนี้ผมยังคิดไม่ออกว่าจะเอาไปใช้ทำอะไรดี แต่ประโยชน์ของมันที่เห็นได้แน่ๆก็คือ คุณจะสามารถกำหนดขนาดของ Layer ได้อย่างแม่นยำโดยไม่ ขึ้นกับสิ่งที่อยู่ใน Layer ไม่ว่ามันจะใหญ่เกินขนาดที่ต้องการสักเท่าไหร่ คุณก็คลิปมันให้อยู่ในขนาดที่คุณต้องการได้ แต่ ถ้าใครมีไอเดียเจ๋งๆก็ส่งมาให้ดูกันบ้างนะครับ ส่วนวันพรุ่งนี้ ผมจะสอนอีกเทคนิคหนึ่ง ที่ให้ผลคล้ายกับการคลิปเลเยอร์ นั่นคือการใช้ Layer ซ้อนใน Layer อย่าลืมติดตามนะครับ อ้อ!! เกือบลืม สำหรับตัวอย่างของการคลิปเลเยอร์ คลิกไปดูกันได้ที่นี่ครับ [ตัวอย่างการคลิปเลเยอร์]

		© copyright 2001 Sorrawut Korsuwansiri