เติมสีสันให้รูปภาพด้วย HTML CODE

              จากที่เคยกล่าวถึง การใส่ HTML code ให้กับข้อความไปแล้ว ในที่นี้ผมขอกล่าวถึงการใส่ HTML ให้กับรูปภาพ ซึ่งจะทำให้ภาพต่างๆ ในบลอกของเรามีสีสันน่าสนใจมากขึ้นครับ

avatar_1810

ปกติแล้วหากเราต้องการวางรูปภาพไว้ในตำแหน่งต่างๆ ของบล็อก ก็ทำได้ด้วยการใช้ tag

<IMG src="Url ของภาพ">      

โดยอักษรสีแดงนั้นคือที่ตั้งของภาพที่เราจะต้องเอาภาพของเราไปฝากไว้ก่อน เช่น อาจจะฝากไว้ที่ http://picasaweb.google.co.th หรือ http://upic.me/ เป็นต้น

แต่ถ้าหากเราอยากให้ภาพของเรามีลักษณะพิเศษมากขึ้นก็สามารถทำได้โดยใส่ tag และเพิ่มลักษณะพิเศษลงไปใน tag ด้วยดังนี้ครับ

code

ลักษณะที่ได้

<IMG height=ความสูง src="Url ของภาพ" width=ความกว้าง>

เป็นภาพที่ถูกกำหนดขนาด
<IMG style="FILTER: gray()"  height=ความสูง src="Url ของภาพ" width=ความกว้าง>
เป็นภาพขาวดำ
<IMG style="FILTER: xray()"  height=ความสูง src="Url ของภาพ" width=ความกว้าง>
เป็นภาพเหมือนภาพ X-ray
<IMG style="FILTER: invert()"  height=ความสูง src="Url ของภาพ" width=ความกว้าง>
เป็นภาพที่แสดงสีแบบ invert

<IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=1)"   height=ความสูง src="Url ของภาพ" width=ความกว้าง>

ความเข้มของสี ไล่จากซ้าย ไปขวา

Opacity และ  FinishOpacity
คือค่าความเข้มของภาพ ปรับเพิ่ม-ลดได้

<IMG style="FILTER: Alpha(Opacity=0,FinishOpacity=100,Style=1)"  height=ความสูง src="Url ของภาพ" width=ความกว้าง>
ทำให้ความเข้มสี ไล่จากขวา ไปซ้าย
<IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=3)"  height=ความสูง src="Url ของภาพ" width=ความกว้าง>
ไล่สีจากกลางภาพ ไปขอบภาพ

ส่วนการใส่ effect ลักษณะอื่นๆ จะมาเพิ่มให้ภายหลังอีกครั้งนะครับ

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. คือว่า ผมลองเอาภาพเคลื่อนไหว gif ลง ที่ gadjet picture แต่มันนิ่งอะคับ เป็นเพราะอะไรคับ แล้วต้องทำไงอะคับ ให้มันเคลื่อนไหว

  1. รบกวนคุณ hackค่ะ..มีเรื่องรบกวนสอบถามอ่ะค่ะ ปัีญหาของดิชั้นมีเช่นเดียวกับ comment ด้านบน ต้องทำอย่างไรจึงจะนำภาพเคลื่อนไหวลง blogger ได้คะ ขอบคุณค่ะ

  1. ทำได้แล้วค่ะ ขอบคุณมากค่ะ อ่านไม่ดีเอง 55++

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel