August 03
การใช้ <IMG> และการเพิ่ม effect ให้กับภาพ
คราวก่อนแนะนำวิธีการใช้ แท็ก <Table> ในภาษา HTML ไปแล้ว
วันนี้ขอนำเสนอ การใช้แท็ก <IMG> ก็แล้วกันนะ
คิดว่าเพื่อนๆส่วนใหญ่คงเคยใส่ภาพ โดยใช้แท็กนี้กันมาบ้างแล้ว
อย่างที่เคยแนะนำไปใน วิธีใส่ภาพใน Blog แบบ Html เมื่อก่อนหน้านี้แล้ว
แต่วันนี้ก็ต้องมีอะไรใหม่ๆเพิ่มเติมน่ะสิ ถึงได้เอามาเขียนใหม่ ^^"
สำหรับรูปแบบ ปกติ ที่เราใช้กัน คือ <IMG src="Url ของภาพ"> หรือถ้าเพิ่มการกำหนด ขนาดไปด้วยก็เป็น
<IMG height=ความสูง src="Url ของภาพ" width=ความกว้าง>
จะเห็นได้ว่า แท็ก <IMG> นี้ไม่ต้องมีแท็กปิดนะคะ เรียกว่า Single Tag
ไม่เหมือนกับแท็ก Table ที่ต้องมี Tagเปิด และ Tagปิด นะคะ
ตัวอย่างเช่น
|
<IMG height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
อันนี้เป็นแบบปกติ ที่เราใช้กันอยู่นะคะ |
วันนี้จะแนะนำการเพิ่ม effect ต่างๆให้กับภาพ
เช่นทำภาพ ขาว-ดำ หรือปรับความเข้ม โดยใส่คำสั่งแบบต่างๆ เพิ่มเข้าไป โดยจะทำตัวอย่างให้ดูเป็นสีๆ นะคะ
สีแดง คือ ชุดคำสั่งที่เพิ่มเข้าไป และ สีชมพู คือ url ของภาพ ค่ะ
|
<IMG style="FILTER: gray()" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ทำภาพแบบ ขาว - ดำ
โดยการเพิ่มคำสั่ง
style="FILTER: gray()"
เข้าไปตามตัวอย่าง |
|
<IMG style="FILTER: xray()" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ทำภาพแบบ X-ray |
|
<IMG style="FILTER: invert()" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
Invert Color |
|
<IMG style="FILTER: fliph()" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
กลับด้าน ซ้าย - ขวา |
|
<IMG style="FILTER: flipv()" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
กลับด้าน บน - ล่าง
|
|
<IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=1)" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ทำให้ความเข้มของสี ไล่จากซ้าย ไปขวา
Opacity และ FinishOpacity
คือค่าความเข้มของภาพ ปรับเพิ่ม-ลดได้ |
|
<IMG style="FILTER: Alpha(Opacity=0,FinishOpacity=100,Style=1)" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ทำให้ความเข้มสี ไล่จากขวา ไปซ้าย
อันนี้จะเหมือนอันบน แต่ว่า
เปลี่ยนตรงค่าความเข้มของภาพ |
|
<IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=3)" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ไล่สีจากกลางภาพ ไปขอบภาพ
ตรง Opacity กับ FinishOpacity
ปรับได้เหมือนกันค่ะ |
|
<IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=2)" height=150 src="http://album.romerun.com/happymew/folder/17719/album/29830/image/604886/pic/original.jpg" width=247>
ไล่ความเข้มของสี เป็นวงกลม
ตรง Opacity กับ FinishOpacity
ปรับได้เหมือนกันค่ะ |
|
|
ลองเอาไปใช้ตกแต่งภาพกันให้สวยๆนะจ๊ะ
แล้วถ้าสงสัยตรงไหนก็คอมเม้นไว้นะคะ
ขอรายละเอียดด้วยนิดนึงก็ดีค่ะ แบบใส่โค้ดไปอะไรบ้าง
แล้วมันไม่ได้ยังไง เราจะได้ตอบได้ตรงจุดหน่อยนะคะ ^^" |
Tools 
