Tech &Tips

ใช้ภาพแทน text link

                 เทคนิค ตอนนี้ ยังคงเป็นเรื่อง การใช้ รูปภาพแทนที่ text  จากที่เราเคยใช้ tag <span> กันไปแล้วในตอน ซ่อน h1 แล้วสวยด้วย images  แต่การแทนที่คราวนี้จะไม่ใช้ tag <span>  และเราจะให้ภาพนั้นเป็น link ได้ด้วย  

สมมติว่าเราทำลิ้งค์ไว้แบบนี้

<a href=”http://www.divland.com/”>email video to friends</a>

หน้าตามันก็จะเป็นลิ้งค์ ธรรมดา แบบนี้

email video to friends

โดยขอบเขตสีเทาจะเป็นลิ้งค์ สามารถกดได้

เราจะเปลี่ยนจาก 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 ให้น้อยที่สุดนั่นเอง

ตัวอย่างนี้ คงจะต้องนำไปประยุกต์ใช้นะครับ เช่นกำหนด class หรือ id เพิ่ม  เพราะการบังคับ tag <a> แบบนี้ ลิ้งค์ทั้งหมด มันก็จะเป็นแบบนี้ไปด้วย  สิ่งที่ต้องการจะให้เห็นจริงๆก็คือ การใช้ tag ให้น้อยที่สุดนั่นเอง

บางคนอาจจะสงสัยว่า ถ้าทำแบบนี้ใส่ <img> ไปในลิ้งค์เลย ไม่ง่ายกว่าเหรอ  ถูกครับ ง่ายกว่า แต่ก็ต้องตามไปใส่ทุกที่ แต่ css เขียนที่เดียว วันหลังอยากเปลี่ยนใจจะให้เป็น text ก็ง่ายแสนง่าย   หรือ ในกรณี ที่เราใช้ template ทำงานร่วมกัน ถ้าเพิ่ม html เข้าไปจะมีผลต่อคนอื่นทั้งหมด ทำให้เราต้องใช้ css ในการแสดงผลแทน 

และในแง่ seo(search engine optimization) ผมก็ไม่แน่ใจว่า link ที่เป็น text กับ link ที่เป็นรูป แล้วใส่ alt แบบไหนเครดิตดีกว่ากัน แต่ผมคิดว่า bot น่าจะชอบ text มากกว่ารูป เพราะมันง่ายและชัดเจนในตัวเอง   :-w  แต่คนดูเว็บน่าจะชอบรูปมากกว่า text