Rollover Image ด้วย CSS
ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย และรู้ความหมายในทันทีโดยอ่านจากชื่อลิงค์ เมื่อเทียบกับรูป เอ๊า! อย่างนี้ก็ไม่ต้องมีเมนูที่ป็นรูปกันพอดี อ่านี่แหล่ะที่เราจะมาทำกันคือ
เปลี่ยนText ลิงค์ธรรมดา ไปเป็นรูป แถม Rollover ได้อีก
ขั้นแรกก็สร้างลิงค์ปกติ และต้องกำหนด ID ของลิงค์เพื่อให้ CSS อ้างถึงด้วย
<a href="#" id="menu_product">Product</a>
ต่อมาก็ใส่ CSS จัดการให้มันแสดงเป็นรูปซะ
<STYLE>
a#menu_product { text-indent: -1000px;background-image:url(menu_product.png); height: 50px; width:200px;}
a#menu_product:hover { background-image:url(menu_product_a.png); }
</STYLE>
จากโค้ดก็มีการเรียก 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 ดูเองได้เลยครับ) : http://www.memo8.com/lab/css/roll-over-1/roll-over-1.html
A friend is never known till a man has need
March 12th, 2009 at 11:51 am
A merry heart goes all the way
March 12th, 2009 at 11:53 am
‹a href=”#” id=”menu_product”›‹span›Product‹/span›‹/a› แล้วทำการซ่อน text ใน span tag ดังนี้ครับ
a#menu_product span {display: none;}
January 20th, 2010 at 12:56 am
@Tanangular: โอ้ว ใช่ครับดันไปทางซ้ายเพราะเป็น -1000px แก้ไขตาม comment แล้วครับ (ไหงตอนนั้นใส่เป็นขวาหว่า????)
ขอบคุณครับ
January 20th, 2010 at 7:54 pm