มาทำ ตัวอักษรสวยๆ ด้วยเทคนิค Image Replacement

ก่อนจะเข้าเรื่อง ผมมีความยินดีที่จะบอกว่า jQueryTips.com ของเราได้นักขี่ยนเพิ่มมาอีก 1 คน นั่นก็คือ Bigchern ซึ่งจะมาเขียน Review Software และ Scripts ที่เป็นประโยชน์ต่างๆ ภายในเว็บแห่งนี้ อาทิเช่น..

วิธีติดตั้ง wordpress บน server จริง
ติดตั้งโปรแกรม Ftp ( File zilla )

และเร็วๆ นี้เรากำลังจะได้ตัว นักเขียนอีกคนที่จะมา เขียนเรื่อง Performance ภายในเว็บ ยังไง รอติดตามละกัน

เอาล่ะมาเข้าเรื่องกันเดี๋ยวจะไม่ได้นอน หลังจากที่ครั้งก่อนผมเคยแนะนำ เทคนิค sIFR จากบทความ

“เปลี่ยน Font เน่าๆ ให้ดูสวยงามด้วย jQuery + sIFR”

และหลังจากวันนั้นผมได้เห็นข้อความต่างๆผ่าน Twitter จนทำให้ได้มาพบกับ ข้อความที่เขียนโดย คุณ zafire06 ซึ่งเข้าบอกว่าวิธีการทำ Text Replacement ยังมีอีกตั้งหลายอย่างผมก็เลมาลองๆ ดู

จนเจอกับเทคนิค Image Replacement นี่ล่ะ ที่เห็นว่าเข้าท่าดี เลยลองไปโหลดมา ศึกษาจากเว็บ ซึ่งก็ได้ผลลัพธ์ออกมาแบบนี้

Example by jQueryTips.com

ซึ่งวิธีการใช้งาน ผมขี้เกียจอธิบายเพราะมันง่ายมากๆ เอาเป็นว่า view source กับดูตัวอย่างประกอบจาก Official website เอาละกัน

ข้อมูลสรุป

หลักการทำงานก็คือ ใช้ เทคนิค GD ของ PHP มาเป็นตัว Render Text ครับ โดยจะทำงานร่วมกับ Javascript และ Css ไปพร้อมๆ กัน

โดยที่ javascript จะทำการอ่านค่า จาก css เรื่องของขนาด font (optional) และจะส่ง parameters ให้กับ php

ตัวอย่างเช่น

text -> เป็นชุด string ที่จะทำการเปลี่ยนเป็นภาพ
cFont -> Font face (จะถูก define ค่าใน config อีกทีนึง เป็น array)

แล้วก็ยังมี parameters อื่นๆ อีกนิดหน่อย (ลอง Generate source ด้วย FireFox ดูจะเห็น)

จากนั้น PHP ก็จะใช้ความสามารถของ GD ในการสร้าง image มา แล้วก็เก็บลง cache โดยมีการทำ hashin folder ไว้ให้แล้ว จบ…

ข้อเสีย

1. สระลอย
2. สร้าง cache เยอะชิบหาย หมั่นลบบ่อยๆ ละกัน ถ้าใช้แบบ dynamic นี่ รัน cron ไว้ลบได้เลย
3. ท่าทางจะกินพลังงาน Server ไม่ใช้น้อย

ลองเองละกันนะครับ สำหรับตัวนี้ ไม่ยากอะไร แต่ให้เลือกผมกลับไปใช้ sIFR น่าจะเป็นคำตอบได้ดีกว่า