jump to navigation

การทำลิงค์ Image rollover ด้วย CSS August 9, 2008

Posted by objectlive in CSS, Web Developer.
Tags: , , ,
trackback

หลักการง่ายๆ ของเทคนิคนี้ คือการใช้ a:hover ในการสร้าง action ตอน เมาส์วางบนเมนูครับ

ในขั้นแรกคือการสร้างรูปภาพสำหรับทำเมนู โดยสร้างรูปในลักษณะเป็น 2 รูปปะติดกัน ฝั่งซ้ายเป็นรูปปกติ ส่วนฝั่งขวาคือรูปที่จะแสดงเมื่อนำเมาส์วาง ตามนี้ครับ

mnhome1.gif
สิ่งที่เราต้องทำ
1. เขียน XHTML ที่จะใช้แสดงเป็นเมนู

<ul class="topmenu">
<li><a href="/" id="home">Home</a></li>
<li><a href="/aboutus/" id="about">Who we are?</a></li>
<li><a href="/portfolio/" id="portfolio">Portfolio</a></li>
<li><a href="/service/" id="service">Service</a></li>
<li><a href="/contact/" id="contact">Contact</a></li>
</ul>

2. เขียน CSS กำหนดให้ลิงค์ของเราเป็นกรอบสี่เหลี่ยมขนาด 135px*154px (หรือตามขนาดที่ต้องการ) จากนั้นกำหนด Background เป็นรูปภาพที่เราสร้างไว้ โดยเริ่มต้นให้จัด Background ชิดซ้าย จากนั้นเขียน a:hover เพื่อกำหนดรูปแบบเมื่อวางเมาส์บนเมนู โดยเปลี่ยนให้จัด Background เป็นชิดขวา

/*กำหนด style ของ ul*/
.topmenu {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0px;
}
/*กำหนด style ของ li*/
.topmenu li {
float:left;
height:154px;
margin:0px;
padding:0px;
width:135px;
}
/*กำหนด style ของ a ให้มีความกว้าง*สูง ตามที่กำหนด และกำหนดการจัด Background ให้ชิดซ้าย*/
.topmenu li a {
background:no-repeat left;
display:block;
float:left;
height:154px;
text-indent:-9999px;
width:135px;
}
/*กำหนด style ของ a เมื่อวางเมาส์ให้เลื่อน Backgroud เป็นชิคขวา เพื่อเปลี่ยนแสดงอีกรูปที่ซ่อนอยู่*/
.topmenu li a:hover {
background-position:right;
}
/*กำหนดรูปที่จะแสดงให้แต่ละเมนู*/
.topmenu #home {
background-image:url(../images/mnhome.jpg);
}
.topmenu #about {
background-image:url(../images/mnabout.jpg);
}
.topmenu #service {
background-image:url(../images/mnservice.jpg);
}
.topmenu #contact {
background-image:url(../images/mncontact.jpg);
}
.topmenu #portfolio {
background-image:url(../images/mnport.jpg);
}

สรุปเผื่องงครับ คือ

ตอนแรก ทำลิงค์ของเราเป็นสี่เหลี่ยมที่มีความกว้้างเท่ากับครึ่งเดียวของรูปที่เราสร้าง และนำรูปที่เราสร้า้งมาใส่เป็น Background ละจัด Background ชิดซ้าย ทำให้ตอนนี้เราจะเห็นแต่รูปซีกที่อยู่ด้านซ้ายเท่านั้น

ต่อมา เขียน a:hover และเปลี่ยนการจัด Background เป็นชิดขวา ทำให้เมื่อนำเมาส์ไปวางที่ ลิงค์ของเรา Background จะถูกสั่งชิดขวา ซึ่งรูปที่เราจะเห็นคือรูปซีก ขวา ทำให้ดูเหมือนมีการเปลี่ยนรูปนั่นเอง

อ้อ..บางคนอาจจะงงว่าทำไมต้องเอารูปมาใส่ด้วยกัน ทำไมไม่ใช้วิธีการสลับรูปเอาจะง่ายกว่า
คือแบบนี้ครับ ถ้าทำแบบนั้นอาจจะง่ายกว่าครับ แต่การที่เราสลับรูปโดยที่ไม่ได้โหลดรูปที่ 2 มาก่อนนั้น อาจจะทำให้ตอนสลับรูปเกิดเป็นช่องโหว่ เพราะว่ารููปที่ 2 ยังโหลดมาไม่เสร็จครับ การใช้วิธีนี้เป็นเครื่องยืนยันได้ว่า ถ้าเห็นรูปแรก รูปที่ 2 ต้องต้องเห็นแน่นอน ::smile20::

ดูตัวอย่างเมนูที่ http://www.rakyimdesign.com

About these ads

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: