(Link) : รวม Link effect เวลาชี้รูป

เเบ่งเป็น 2 ขึ้นตอนนะครับ

a img {ใส่โค๊ต} = การกำหนดเอฟเฟคของรูปปกติ

a:hover img {ใส่โค๊ต} = การกำหนดเอฟเฟคของรูปหลังชี้ Mouse

ถ้าอยากให้เป็นภาพปกติก็ใส่โค๊ต Filter: none = ภาพปกติ

<style type="text/css">a:link img {ใส่โค้ดลิงค์;} a:visited img {ใส่โค้ดลิงค์;} a:hover img {filter:none;}</style><br /><br />

::Filter ที่จะนำไปใส่ในช่อง {ใส่โค้ดลิงค์}::

- ชี้เเล้วภาพขาว-ดำ

Filter: Gray

- ชี้เเล้วภาพเเนวx-ray

Filter: Xray

- ชี้เเล้วภาพกลับเป็นสีตรงข้ามกัน

Filter: Invert

- ชี้เเล้วภาพจางลงเหลือ60% (สามารถปรับค่าได้ใส่เลขอะไรภาพจะเหลือความจางเท่านั้น%)

Filter: Alpha(opacity=60)

- ภาพเบลอธรรมดา ::กำลังดี::

Filter: Blur

- ภาพเบลอมากๆ

Filter: Blur(Add = 0, Direction = 225, Strength = 10)

- ชี้ลิ้งเป็นรูปคลื่น

Filter: Wave(Add=0, Freq=10, LightStrength=20, Phase=220, Strength=10)

- ชี้ลิ้งเเล้วเป็นกลมๆ

Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)

- ชี้ลิ้งเเล้วเป็นคลื่น...ลองเอง

Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)

- กลับด้านซ้าย-ขวา

FILTER: fliph()

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

FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=1)

- ชี้ลิ้งเเล้วความเข้มสี ไล่จากขวา->ไปซ้าย

FILTER: Alpha(Opacity=0,FinishOpacity=100,Style=1)

- ไล่สีจากกลางภาพ ไปขอบภาพ

FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=3)

- ชี้ลิ้งเเล้วใส่ Filter แบบไล่สีเป็นวงกลมให้กับภาพ

FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=2)

- ภาพปกติ

Filter: none

Credit :: ThaiHi5.com (http://kojungza.hi5.com/)

---------------------------------------------------------------------------------

Code Link EFFECT แบบสำเร็จ

แบบที่ 1 page เบลอๆ

<style type="text/css">
a:link img {filter:blur(add = 0, direction = 225, strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}
</style>



แบบที่ 2 จะเปลี่ยนเป็นสีเทา

<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;} a:hover img {filter:gray;}
</style>



แบบที่ 3 ด้านซ้ายไปขวา จากขวาไปซ้าย

<style type="text/css">
a:hover img {filter:fliph;}
</style>



แบบที่ 4 อันนี้ต้องลองเอง

<style type="text/css">
a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}
</style>



แบบที่ 5 page ใส

<style type="text/css">
a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}
</style>



แบบที่ 6 ขาวดำ

<style type="text/css">
a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}
</style>



แบบที่ 7 เหมือน หิน

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>