[CSS - How To] การใส่ opacity โดยใช้สคริป
posted on 16 Feb 2007 17:22 by rije in HowToเมื่อ entry ที่แล้ว ได้ลงวิธีทำให้ตารางเกิด opacity ด้วยรูป
มา entry นี้เป็นการใส่โค้ด style ของ css กับตารางแทนครับ
ใช้รูปใหม่มาทดสอบกันนะครับ
----------------------------------------
วิธีที่ 1 สร้าง css ไฟล์ขึ้นมา โดยข้างในใส่โค้ดนี้ไป
.opacity{
background-color:#ffffff;
opacity:.5;
}
จากโค้ดข้างบน ผมขออธิบายดังนี้ครับ
.opacity = เป็นชื่อคลาสที่ผมจะใช้เรียก
background-color:#ffffff; = ใส่สีพื้นหลัง
#ffffff = โค้ดสีขาว จะใส่โค้ดสีอื่นก็ได้ครับ
opacity:.5; = ตั้งค่า opacity ไว้ 0.5
ในที่นี้ค่า opacity มีค่าเต็ม 100% คือ 1
เพราะฉะนั้นผมใช้ 50% ก็เป็น 0.5 ครับ
จากนั้นเซฟไฟล์เป็น .css เอาไว้ต่างหาก
วิธีการเรียกใช้สคริปนี้ผ่าน html ทำดังนี้ครับ
โดยใส่โค้ดนี้ไว้ระหว่าง <head>...</head> ครับ
เมื่อเชื่อมลิงค์ css เข้ากับ html แล้ว วิธีเรียกใช้คลาส
<table class="opacity">
<tr>
<td> text</td>
</tr>
</table>
class="opacity" = เรียกใช้ function ภายในคลาส
มาใช้ อ้างอิงถึงไฟล์ .css ด้านบน โดยเรียกผ่านคลาส
ที่ชื่อ opacity ตามที่ได้ตั้งชื่อเอาไว้ครับ
++++++++++++++++++++++
วิธีที่ 2 เป็นการใส่ style ลงไปที่เพจ html โดยตรง
โดยใส่โค้ดเอาไว้ระหว่าง <head>...</head> ครับ
<STYLE TYPE="TEXT/CSS"><!--
.opacity{
background-color:#ffffff;
opacity:.5;
}
//--></STYLE>
การใส่ style แบบนี้ สามารถเรียกใช้คลาส opacity
ได้โดยตรง โดยไม่ต้องเชื่อม css กับ html ครับ
แต่วิธีแรก เราสามารถนำ css ไปใช้กับไฟล์ html
ได้หลายๆ ไฟล์ ซึ่งต่างจากแบบที่ 2 ที่ใช้ได้
เฉพาะกับไฟล์ html ตัวนั้นเท่านั้นครับ
----------------------------------------
ทั้ง 2 รูปแบบการใช้ css ก็ลองเอาไปใช้ดูนะครับ
ถ้าใช้ผ่าน style แล้ว ก็ไม่จำเป็นต้องใช้ภาพสร้าง opacity ครับ
ที่จริงผมต้องลง tutorial FLASH ต้องขอโทษด้วย
เอาไว้มีโอกาสคราวหน้าเอามาลงแน่นอนครับ ^^
See you next Entry!
