Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip Java Visual Effects Boxover
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 5011|ตอบ: 0
go

Java Visual Effects Boxover

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:52 |แสดงโพสต์ทั้งหมด
จากการท่องเน็ตหาความรู้มาเผยแพร่กับสมาชิกชาวไทยกราฟผู้เรียนรู้ทุกท่าน วันนี้ก็นำเสนอการใช้ Java Visaual Effects ซึ่งเป็นรูปแบบ Boxover ก็คือเวลาเอา mouse มาชี้แล้วจะเกิดกรอบข้อความขึ้นมาแต่ที่ไม่ธรรมดาก็คือกรอบข้อความนั้น จะโปร่งใสมองทะลุเห็นพื้นหลังด้วย

Visual Effects ตัวนี้จะทำการดึงสคริ๊บจากไฟล์ boxover.js เพื่อจะรันสคริ๊บใน html ได้ซึ่งสะดวกต่อการปรับแต่งกว่าการแทรก Java ลง html เลย ตัวนี้จะสามารถนำมาใช้ประโยชน์ได้หลากหลาย ช่วยอธิบายรายละเอียดข้อมูลได้ดี โดยไม่ต้องเสียเวลาลิ้งค์เข้า หาข้อมูลหรือ Open Windows ขึ้นมาใหม่ จะทำให้เข้าถึงข้อมูลง่ายมากเพียง Mouse สัมผัส เอาหละสนใจแล้วหละสิ เราลองมา ดูหลักวิธีการใช้กันเลย

 

ขั้นตอนที่1. เริ่มกันเลยก็คือเราต้องทำการโหลดไฟล์ boxover.js มาใส่ในโฟล์เดอร์ของเราเสียก่อน โดยโหลดจากที่นี่

http://www.thaigraph.com/training/visualboxover/boxover1.5.1.zip [ จากไทยกราฟ ]

http://boxover.swazz.org/download/boxover1.5.1.zip [ จากเวปเจ้าของโปรแกรม ]

ขั้นตอนที่2. จากนั้นทำการแตกไฟล์ Zip เอาไฟล์ boxover.js ออกมาใส่ในโฟล์เดอร์เรา แล้วมาที่ไฟล์ html ที่เราใส่ Effects ลงไป จากนั้นให้ทำการพิมพ์คำสั่งลงไปในตำแหน่งที่กำหนดไฟล์ html ดังตัวอย่าง.

ขั้นตอนที่3. จากนั้นให้ทำการใส่คำสั่งของ Visual ลงไปในไฟล์ html ของเรา ตัวอย่างนี้จะทำ Effects กับรูปภาพก่อน โดยให้แทรก คำสั่งดังตัวอย่าง.

ภาพที่1. รูปแบบคำสั่งในการแทรก

ภาพที่2. แทรกคำสั่งร่วมกับคำสั่ง html

 

 

ภาพที่3. ผลจากการบันทึกและ view ดูใน Browser พอเอา mouse ไปชี้ก็จะเกิดกรอบข้อความโปร่งแสงขึ้นมาดังภาพ.

 

 

ขั้นตอนที่4. ทีนี้เรามาใส่คำสั่งลงร่วมกับคำสั่งข้อความใน html ดู ดังภาพตัวอย่าง.

ภาพที่1. คำสั่งในการแทรก ซึ่งก็เหมือนขั้นตอนที่3

 

ภาพที่2. แทรกคำสั่งร่วมกับคำสั่ง html

 

 

ภาพที่3. ผลจากการบันทึกและ view ดูใน Browser พอเอา mouse ไปชี้ก็จะเกิดกรอบข้อความโปร่งแสงขึ้นมาดังภาพ.

 

ขั้นตอนที่5. เมื่อทำการใส่คำสั่งแล้วสามารถรันคำสั่งได้แล้ว จากนั้นเราก็มาทดสอบใส่ข้อมูลแบบเป็นการเป็นงานให้ดูแนวทางการนำเอามาใช้ เราสามารถแทรกรูปภาพลงในกรอบข้อความโปร่งแสงนั้นได้โดยมีข้อแม้ว่าคำสั่งภายใน [ ] จะมีคัวฟันหนูขีดเดียวดังตัวอย่าง.

ภาพที่1. ตัวอย่างการนำคำสั่งมาแทรกและเสริมคำสั่ง html ลงไปในคำสั่ง Visual (รูปภาพ)

 

ภาพที่2. ตัวอย่างการนำคำสั่งมาแทรกและเสริมคำสั่ง html ลงไปในคำสั่ง Visual (ตัวอักษร)

จากภาพจะเห็นว่า head คือการใส่หัวเรื่องลงไปในส่วนของข้างบนกรอบข้อความนั้นเอง ส่วน body คือการใส่ข้อมูลลงไปตรงส่วนของ เนื้อหาเช่นใส่รูปภาพและข้อความลงไปในรายละเอียด.

 

ภาพที่3. ผลจากการบันทึกและ view ดูใน Browser พอเอา mouse ไปชี้ก็จะเกิดกรอบข้อความโปร่งแสงขึ้นมาดังภาพ.

 

ขั้นตอนที่6. หลักแนวทางในการปรับแต่งตัว Scripts เพิ่งเติมโดยปรับแต่งที่ไฟล์ boxover.js ทำการเปิดไฟล์ boxover.js เราสามารถเปิดได้ใน editpad หรือ ใน Dreamweaver MX ได้เลย แล้วดูส่วนของ function defHdrStyle และ function defBdyStyle สองส่วนนี้จะเป็นการปรับแต่งพื้นฐาน ก็คือส่วนแรกจะปรับแต่งตรงหัวเรื่องหรือส่วน head ส่วนที่สองจะเป็นส่วนของ body นี่ก็ส่วนของรายละเอียด เราสามารถ ปรับสีและขนาดได้ ในตรงส่วน header ได้ตรงที่ dvHdr.style.width='200px'; และdvBdy.style.width='200px'; ของ body ขนาดกรอบก็จะขยายขึ้น ส่วนสีก็ปรับตามโคดสีในส่วนของ header และ body ได้เลยดังตัวอย่าง.

 

 

ท่านสามารถดูตัวอย่าง View ที่ทำสำเร็จแล้วได้ที่นี่

 

คุยก่อนจบ. เป็นไงบ้างขอรับงานนี้ต้องคนที่พอจะเขียนพวก html ได้พอสมควรถึงจะปรับแต่งและใช้สคริ๊บพวกนี้ได้ และเราก็สามารถเอาไปใช้กับเวป ได้หลากหลายถ้าเราทำความเข้าในสคริ๊บนี้ พวก Visual Effects นี้มีอีกเยอะที่น่าสนใจและไทยกราฟจะนำมาเสนออีกในคราวหน้าหละกันขอรับ ...

 

ขอปัญญาเกิดแด่ท่าน

ไทยกราฟ ดอท คอม

 


Thaigraph

GMT+7, 26-8-2019 16:26 , Processed in 0.061290 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books