ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ 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