ใช้ภาพแทน text link
May 20th
เทคนิค ตอนนี้ ยังคงเป็นเรื่อง การใช้ รูปภาพแทนที่ text จากที่เราเคยใช้ tag <span> กันไปแล้วในตอน ซ่อน h1 แล้วสวยด้วย images แต่การแทนที่คราวนี้จะไม่ใช้ tag <span> และเราจะให้ภาพนั้นเป็น link ได้ด้วย 
>-
สมมติว่าเราทำลิ้งค์ไว้แบบนี้
<a href=”http://www.divland.com/”>email video to friends</a>
หน้าตามันก็จะเป็นลิ้งค์ ธรรมดา แบบนี้
ถ้าเราเขียน css แบบนี้
<style type=”text/css”>
a{width:221px;height:33px; background:#CCCCCC}
</style>
ก็จะได้ ลิ้งค์ หน้าตาแบบนี้
โดยขอบเขตสีเทาจะเป็นลิ้งค์ สามารถกดได้
เราจะเปลี่ยนจาก background สีเทา มาเป็นรูปแทน ดังนี้
<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat}
</style>
จะได้ลิ้งค์แบบนี้
ภาพแสดงไม่เต็มพื้นที่ แก้ปัญหาด้วยการ ใส่ display:block
<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat;display:block}
</style>
จะได้แบบนี้
สุดท้ายเอา text ไปซ่อน เขียนเพิ่ม ดังนี้
<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat;display:block; text-indent:-5000px}
</style>
จะได้ ผลสำเร็จ แบบนี้
text-indent คือ การกำหนด ย่อหน้าของ text ซึ่งเรากำหนดติดลบไว้ถึง 5000 px นั่นคือมันเลื่อนเข้าไปทางซ้ายจอคอมพิวเตอร์ นั่นเองไม่ได้หายไปไหน ถ้าคุณลองปรับขนาดหน้าจอ จาก ปกติ กว้าง 1024 เป็น กว้าง 5000 คุณก็อาจจะเห็น text ตัวนี้ได้ (จะมีคนไปลองจริงๆมั้ยนะ อิอิ 
)
ตัวอย่างนี้ คงจะต้องนำไปประยุกต์ใช้นะครับ เช่นกำหนด class หรือ id เพิ่ม เพราะการบังคับ tag <a> แบบนี้ ลิ้งค์ทั้งหมด มันก็จะเป็นแบบนี้ไปด้วย สิ่งที่ต้องการจะให้เห็นจริงๆก็คือ การใช้ tag ให้น้อยที่สุดนั่นเอง
บางคนอาจจะสงสัยว่า ถ้าทำแบบนี้ใส่ <img> ไปในลิ้งค์เลย ไม่ง่ายกว่าเหรอ ถูกครับ ง่ายกว่า แต่ก็ต้องตามไปใส่ทุกที่ แต่ css เขียนที่เดียว วันหลังอยากเปลี่ยนใจจะให้เป็น text ก็ง่ายแสนง่าย หรือ ในกรณี ที่เราใช้ template ทำงานร่วมกัน ถ้าเพิ่ม html เข้าไปจะมีผลต่อคนอื่นทั้งหมด ทำให้เราต้องใช้ css ในการแสดงผลแทน
และในแง่ seo(search engine optimization) ผมก็ไม่แน่ใจว่า link ที่เป็น text กับ link ที่เป็นรูป แล้วใส่ alt แบบไหนเครดิตดีกว่ากัน แต่ผมคิดว่า bot น่าจะชอบ text มากกว่ารูป เพราะมันง่ายและชัดเจนในตัวเอง 
แต่คนดูเว็บน่าจะชอบรูปมากกว่า text เพลนๆ ก็เลยต้องทำเอาใจทั้งคู่ 555
ผมใช้
text
ให้ display ของ และ เป็น block
กำหนดให้มีความกว้างเท่ากันโดยให้ overflow ของ เป็น hidden
กำ comment ไม่ได้กรอง html นี่
อืมมม เทคนิคนี้เคยเห็นหลาย ๆ เวบใช้อยู่เหมือนกันค่ะ แล้วแบบนี้เราควรจะใช้วิธีoverflow:hidden หรือ text-indent ติดลบดีคะ
แบบแรกต้องมี tag span แต่แบบที่ 2 ไม่ต้องมี เลือกใช้ตามความเหมาะสมครับ
เจ๋งครับ^^
เอ… ทำไมตอน preview แล้วรูปไม่ขึ้นอ่าคะ
แต่ตอนทำใน dream มันขึ้นน้า
หรือว่าเราทำอะไรผิดหว่า
พยายามเอาเทคนิคนี้ไปใส่ใน joomla พยายามไม่สำเร็จ อยากทราบว่า ใน templates/ชื่อtemplates/css/template.css
อยากทราบ format ในการระบุชื่อของโมดุล(จุมลา)ว่า ..เราจะสั่งให้หัวโมดุลนั้นๆ เป็นรูปต่างๆ ได้อย่างไร
เช่น(ลองทำไม่สำเร็จ หัวโมดุลยังเป็นของเดิม)
.User_Menu h1, .User_Menu h2 , .User_Menu h3, .User_Menu h4, .User_Menu h5{
height: 122px;
line-height: 120px;
padding: 2px 5px 0 5px;
font-size: 112px;
background: url(../images/bg.gif) repeat-x;
}
รบกวนผู้รู้ช่วยด้วยครับ
Thank you for good information
ความรู้แบบนี้ชอบจริงๆ