- ในบทนี้จะกล่าวถึงอิมเมจออบเจ็กต์สำหรับติดตั้งรูปภาพ และการปรับแต่งรูแภาพที่ติดตั้งการสร้าง Div ที่เราคุ้นเคยมานานแล้ว แต่ยังไม่ค่อยได้นำ
มันมาใช้เต็มที่ เนื่องจากอาจยังไม่ทราบว่า มันมีพร็อปเพอร์ตี้อะไรบ้าง ที่ให้มันทำงาน
อิมเมจออบเจ็กต์
- อิมเมจออบเจ็กต์ (Image Object) เป็นออบเจ็กต์ที่ใช้แสดงรูปภาพ ซึ่งจะขาดไม่ได้เลยในการสร้างเว็บเพจ และคงจะไม่เหมาะสมที่เว็บเพจของเรา จะมี
แต่ตัวหนังสือโดยไม่มีรูปภาพประกอบ
- อิมเมจออบเจ็กต์นอกจากจะแสดงรูปภาพได้แล้ว ยังสามารถแสดงเป็นภาพยนต์ได้อีกด้วย อิมเมจจะต้องสร้างจากเอชทีเอ็มแอล โดยเขียนรชคำสั่งได้
เป็น < Imp Src="ไฟล์รูปภาพ" > ถ้าเราต้องการเขียนโปรแกรม Vbscript เพื่อควบคุมอิมเมจแล้ว ก็ต้องตั้งชื่อให้กับมัน
พร็อปเพอร์ตี้ของอิมเมจออบเจ็กต์
- อิมเมจเป็นออบเจ็กต์ที่มีบทบาทอย่างสูงในการสร้างเพจให้มีความสวยงาม ดังนั้นพร็อปเพอร์ตี้ของอิมเมจ จะมีมากกว่าออบเจ็กต์ที่ผ่านมา ดังต่อไปนี้
1. Src
- เป็นพร็อปเพอร์ตี้ที่สำคัญสำหรับบอกตำแหน่งรูปภาพที่จะนำมาแสดง โดยมีค่าเป็นตัวหนังสือ และเมื่ออิมเมจมีชื่อเป็น Img ซึ่งจะมีรูปแบบการเขียน
โปรแกรมดังนี้
- Document.All.Img.Scr="C:\My Document\Rsd1.gif"
2. DynSrc
- เป็นพร็อปเพอร์ตี้สำคัญอีกอันหนึ่ง สำหรับกำหนดตำแหน่งชื่อและที่อยู่ของไฟล์ที่เป็นไฟล์ Avi (ไฟล์ภาพยนตร์ป เพื่อให้อิมเมจออบเจ็กต์แสดงเป็นภาพยนต์
แสดงเป็นภาพยนต์แทนรูปภาพธรรมดา โดยีรูปแบบการเขียนโปรแกรมดังนี้ คือ
- Document.All.Img.DynScr="C:\My Document\Cnn.Avi"
3. Loop
- เป็นพร็อปเพอร์ตี้ที่แสดงจำนวนรอบของการแสดงไฟล์ภาพยนตร์ ซึ่งอาจจะให้มีการแสดงหลายๆ ครั้งก็ได้ โดยการกำหนดที่พร็อปเพอร์ตี้นี้ และจะมีค่า
เป็นตัวเลข รูปแบบการเขียนโปรแกรมมีดังนี้
- Document.All.Img.Loop=2
4. Width
- เป็นพร็อปเพอร์ตี้สำหรับกำหนดขนาดกว้างของอิมเมจ โดยมีค่าเป็นตัวเลขและมีหน่วยเป็นพิกเซล โดยมีรูปแบบการเขียนโปรแกรมดังนี้ คือ
- Document.All.Img.Width=500
5. Height
- เป็นพร็อปเพอร์ตี้สำหรับกำหนดขนาดความสูงของอิมเมจ โดยมีค่าเป็นตัวเลขและมีหน่วยเป็นพิกเซล มีรูปแบบการเขียนโปรแกรมดังนี้ คือ
- Document.All.Img.Height=500
6. Vspace
- เป็นพร็อปเพอร์ตี้สำหรับกำหนระยะช่องไฟของอิมเมจออบเจกต์ ไปยังอีกออบเจ็กต์หนึ่ง หรือเป็นตัวหนังสือในแนวตั้ง
มีค่าเป็นตัวเลข และมีหน่วยเป็นจำนวนตัวหนังสือ รูปแบบการเขียนโปรแกรมมีดังนี้ คือ
- Document.All.Img.Vspace="20"
7. Hspace
- เป็นพร็อปเพอร์ตี้สำหรับกำหนดระยะช่องไฟของอิมเมจออบเจ็กต์ ไปยังอีกออบเจ็กต์หนึ่ง หรือเป็นตัวหนังสือในแนวนอน โดยมีค่าเป็นตัวเลข และมีหน่วยเป็นจำนวน
หนังสือ
- Document.All.Img.Hspace="20'
8. Align
- เป็นพร็อปเพอร์ตี้สำหรับจัดวางตัวหนังสือที่ใช้แสดงประกอบกับอิมเมจออบเจ็กต์ในตำแหน่งต่างๆ ซึ่งจะมีให้เลือกทั้งสิ้ 9 ตำแหน่ง คือ Top, Middle,
Absbuttom,Absmiddle,TextTop,Baseline,Left และ Right
และมีค่าเป็นชื่อตำแหน่งต่างๆ ทั้ง 9 นี้ รูปแบบของการเขียนโปรแกรมมีดังนี้
- Document.All.Img. Align="Middle"
9. Border
- เป็นพร็อปเพอร์ตี้สำหรับให้แสดงเส้นกรอบของอิมเมจ โดยสามารถกำหนดเป็นตัวเลข ที่มีหน่วยเป็นพิกเซล ถ้าเรากำหนดเป็น 0 หมายความว่า ไม่ต้อง
การเส้นกรอบ และถ้ากำหนดให้มีค่ามากขึ้น เส้นกรอบของอิมเมจก็จะมีเส้นที่หนามากขึ้น รูปแบบของการเขียนโปรแกรมมีดังนี้
- Document.All.Img.Border="2"
10. Alt
- เป็นพร็อปเพอร์ตี้สำหรับแสดงข้อความในบริเวณที่ตั้งของรูปภาพที่หาไม่พบ หรือใช้เวลานำขึ้นมาแสดงเป็นเวลานาน หรือเป็นทูลทิป (Tooltip)
แสดงข้อความเมื่อเราวเลื่อนเมาส์เข้าไปในบริเวณรูปภาพนี้
รูปแบบการเขียนโปรแกรมมีดังนี้ คือ
- Document.All.Img.Alt="หารูปไม่พบ"
11. LowSrc
- เป็นพร็อปเพอร์ตี้สำหรับนำรูปภาพรูปที่สอง ในกรณีที่ไม่สามารถนำรูปภาพแรกที่เกิดด้วยการใช้ค่า Src ได้ โดยจะมีค่าเป็นตัวหนังสือที่แสดงชื่อและที่
อยู่ของไฟล์รูปภาพนี้ รูปแบบของการเขียนคำสั่งมีดังนี้
- Document.All.Img.LowSrc="C:\My Document\NoPic.gif"
12. Start
- เป็นพร็อปเพอร์ตี้สำหรับเป็นจุดเริ่มต้นการทำงานของไฟล์ภาพยนตร์ โดยจะมีตัวเลือกให้ทำงานอยู่ 2 ตัวเลือก คือ "FileOpen" และ "MouseOver"
ซึ่งตามปกติแล้วพร็อปเพอร์ตี้นี้มักจะถูกกำหนดตอนเริ่มต้นของการสร้างอิมเมจ รูปแบบการเขียนโปรแกรมมีดังนี้
- Document.All.Img.Start="MouseOver"
13. Style
- เป็นพร็อปเพอร์ตี้สำคัญที่จะกำหนดให้อิมเมจแสดง หรือซ้อน หรือเปลี่ยนแปลงตำแหน่งของอิมเมจเพื่อทำให้เกิดการเคลื่อนไหวของรูปภาพ พร็อปเพอร์
ตี้ก็จะมีรูปแบบการทำงานเหมือนออบเจ็กต์อื่นๆ ที่ผ่านมานั่นเอง
Div (Layer)
- เป็นพร็อปเพอร์ตี้สำคัญหนึ่ง ที่มีความสำคัญมากในการสร้างเว็บเพจให้ดูสวยงาม และสามารถทำให้ตัวหนังสือหรือรูปภาพเคลื่อนที่ไปมาได้อย่างง่ายดาย
ทำให้เว็บเพจที่อยู่กับที่ และเรามักพบคำสั่ง Div ในภาษาเอชทีเอ็มแอลตอนสร้างเว็บเพจ เช่น การจัดวางให้อยู่ตางกลาง แล้วเรามักใช้คำสั่งเป็น
< Div Align= "Center" > เสมอ ในออบเจ็กต์ Div เราสามารถบรรจุตาราง บรรจุภาพ หรือตัวหนังสืออื่นๆ ในนี้ได้หมด การเขียนโปรแกรมเพื่ออ้างอิง
ถึง Div ได้ดังนั้น จะต้องตั้งชื่อให้กับมันเหมือนออบเจ็กต์ตัวอื่นๆ
พร็อปเพอร์ตี้ของ Div
- พร็อปเพอร์ตี้ของ Div จะมีไม่มากเหมือนออบเจ็กต์อื่นๆ ซึ่งจะมีพร็อปเพอร์ตี้หลักอยู่ในพร็อปเพอร์ตี้ Style แต่ดังที่ได้กล่าวไปแล้วว่า ภายในพร็อปเพอร์ตี้
Style จะมีพร็อปเพอร์ตี้ย่อยอีกหลายพร็อปเพอร์ตี้ เราสามารถกำหนดพร็อปเพอร์ตี้ให้แก่ Div ด้วยภาษาเอชทีเอ็มแอล ตอนที่เริ่มสร้าง Div ได้เช่นเดียวกัน
โดยมีรูปแบบการเขียนคำสั่งได้เป็น
- < Div Name="Div1" Style="Property1:ค่าที่เลือก;Property2:ค่าที่เลือก;Property3:ค่าที่เลือก" >
ตัวอย่าง สมมติว่าเราต้องการสร้างออบเจ็กต์ Div ที่มีชื่อเป็น Back โดยให้มีสีพื้นเป็นสีแดงและตัวหนังสือเป็นสีเหลือง ขนาดของฟอนด์เป็น 18 แล้ว
เราจะสร้างเขียนคำสั่งเอชทีเอ็มแอลสร้างออบเจ็กต์ Div ได้เป็น
- < Div ID="Back" Style="Blackground-Color:Red; Color:Yellow;Font-Size=18" >
ส่วนรูปแบบการเขียนโปรแกรมใน VbScript จะเขียนได้ดังต่อไปนี้คือ
- Back.Style.BackgroundColor="Red"
- Back.Style.Color="Yelloe"
- Back.Style.FontSize="18"
InnerText หรือ InnerHtm
- เป็นคำสั่งสำหรับนำข้อความที่เป็นตัวหนังสือ เข้าไปบรรจุอยู่ในออบเจ็กต์ Div เช่นเดียวกับพร็อปเพอร์ตี้ Value ของเท็กซ์บ็อกซ์หรือบัตทอนนั่นเอง
รูปแบบการเขียนโปรแกรมมีดังนี้ คือ
- Back.innerText="ข้อความที่บรรจุ"
โดยที่ออบเจ็กต์ Div มี ID เป็น Back