ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย และรู้ความหมายในทันทีโดยอ่านจากชื่อลิงค์ เมื่อเทียบกับรูป เอ๊า! อย่างนี้ก็ไม่ต้องมีเมนูที่ป็นรูปกันพอดี อ่านี่แหล่ะที่เราจะมาทำกันคือ

เปลี่ยนText ลิงค์ธรรมดา ไปเป็นรูป แถม Rollover ได้อีก

roll-over-css

ขั้นแรกก็สร้างลิงค์ปกติ และต้องกำหนด ID ของลิงค์เพื่อให้ CSS อ้างถึงด้วย

ต่อมาก็ใส่ CSS จัดการให้มันแสดงเป็นรูปซะ

จากโค้ดก็มีการเรียก CSS ปกติโดยมี 2 แบบคือลิงค์ธรรมดา(a#menu_product) กับลิงค์ตอน mouse over(a#menu_product:hover) คำสั่งหลักๆก็มีไม่ีกี่คำสั่งดังนี้

  • text-indent สั่งให้ดัน Text ที่อยู่ในภายในลิงค์ คือคำว่า Product ออกไปทางซ้ายจะได้ไม่ต้องมาแสดงทับ background-image ที่เราโหลดมาแสดงแทน(menu_product.png)
  • heightและwidth กำหนดกว้างสูงตามรูป background

เรียบร้อย ถ้ามีหลายลิงค์ก็ทำแบบเดียวกันแต่ ID ต้องไม่ซ้ำกันนะคับ

ตัวอย่าง(Viewsource ดูเองได้เลยครับ) : https://www.memo8.com/lab/css/roll-over-1/roll-over-1.html

Author:

(ตั้ม) ศิริชัย ธีรภัทรสกุล เป็นเว็บโปรแกรมเมอร์ และบล็อกเกอร์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ ปัจจุบันผมยังรับพัฒนาเว็บไซต์ หากสนใจสามารถติดต่อสอบถามได้ครับ