ใช้ภาพแทน 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

 

ถ้าเราเขียน css แบบนี้

<style type=”text/css”>
a{width:221px;height:33px; background:#CCCCCC}
</style>

ก็จะได้ ลิ้งค์ หน้าตาแบบนี้

email video to friends

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

เราจะเปลี่ยนจาก background สีเทา มาเป็นรูปแทน ดังนี้

<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat}
</style>

จะได้ลิ้งค์แบบนี้

imagelink 

ภาพแสดงไม่เต็มพื้นที่ แก้ปัญหาด้วยการ ใส่ display:block

<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat;display:block}
</style>

จะได้แบบนี้

imagelink

สุดท้ายเอา text ไปซ่อน เขียนเพิ่ม ดังนี้

<style type=”text/css”>
a{width:221px;height:33px; background:url(btn_emailtofriends.gif) no-repeat;display:block; text-indent:-5000px}
</style>

จะได้ ผลสำเร็จ แบบนี้

emailtofriends

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 มากกว่ารูป เพราะมันง่ายและชัดเจนในตัวเอง   :-w  แต่คนดูเว็บน่าจะชอบรูปมากกว่า text เพลนๆ  ก็เลยต้องทำเอาใจทั้งคู่ 555

Related posts

7 Comments »

  1. ilumin said,

    June 18, 2007 @ 8:33 pm

    ผมใช้
    text

    ให้ display ของ และ เป็น block
    กำหนดให้มีความกว้างเท่ากันโดยให้ overflow ของ
    เป็น hidden

  2. ilumin said,

    June 18, 2007 @ 8:33 pm

    กำ comment ไม่ได้กรอง html นี่

  3. jennessa said,

    June 19, 2007 @ 6:14 pm

    อืมมม เทคนิคนี้เคยเห็นหลาย ๆ เวบใช้อยู่เหมือนกันค่ะ แล้วแบบนี้เราควรจะใช้วิธีoverflow:hidden หรือ text-indent ติดลบดีคะ :-?

  4. utt said,

    June 19, 2007 @ 10:06 pm

    แบบแรกต้องมี tag span แต่แบบที่ 2 ไม่ต้องมี เลือกใช้ตามความเหมาะสมครับ

  5. ming9899 said,

    March 26, 2008 @ 5:04 pm

    เจ๋งครับ^^

  6. YukYik said,

    April 21, 2008 @ 4:33 pm

    เอ… ทำไมตอน preview แล้วรูปไม่ขึ้นอ่าคะ
    แต่ตอนทำใน dream มันขึ้นน้า

    หรือว่าเราทำอะไรผิดหว่า

RSS feed for comments on this post · TrackBack URI

Leave a Comment

:) :( :d :"> :(( \:d/ :x 8-| /:) :o :-? :-" :-w ;) [-( :)>- more »

email

จัดส่งถึงที่ โดย

ลิ้งค์สำหรับ rss reader

advertise
advertise
ติดต่อ cssmaster@divland.com
IDOL Beautifulidol.com WAZCOOL Wazcool.com ASTORE Astoreblog.com
MUSIC Hfonemusic.com POST Postigg.com LOAD uploadtoday.com