1. code LINKรูปภาพ ภาพเป็นขาวดำพอเมาส์ผ่านเป็นสี

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style> td,th,div,body,li,ul,p { color: #999999; font-size:8pt; font-family: ''MS Sans Serif'', ''Microsoft Sans Serif'',sans-serif; } </style><style>A:link{color:#8F8F8F;text-decoration:none;} A:visited{color:#999999;text-decoration:none} A:hover{color:#999999;text-decoration: none;}</style><style> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:;} </style> <!-- end code by zalim-code.com -->

2. code LINKรูปภาพ ภาพจะจาง พอเอาเมาส์ชี้จะชัดขึ้น

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <script language="JavaScript" type="text/javascript"> var itv = 50; var step = 10; var start = 0; var end = 0; var currentOpac; //change the opacity for different browsers function changeOpac(obj, opacity) { var object = obj.style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } function BeginOpacity(obj, s, e) { start = s; end = e; currentOpac = s; theobject=obj; changing=setInterval("opacityit(theobject)",itv); } function EndOpacity(obj, end){ clearInterval(changing); changeOpac(obj, end); } function opacityit(obj){ if(start > end) { if (currentOpac>end){ currentOpac = currentOpac - step; changeOpac(obj,currentOpac); } else if (window.highlighting) clearInterval(highlighting); } else if(start < end) { if (currentOpac<end){ currentOpac = currentOpac + step; changeOpac(obj,currentOpac); } else if (window.changing) clearInterval(changing); } } //--> </script> <!-- end code by zalim-code.com -->

อยากให้ภาพไหนจาง ให้ใส่ โค๊ดตัวนี้ต่อท้าย

<!-- start code by zalim-code.com --> style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40) <!-- end code by zalim-code.com -->

เช่น

<img src="http://www.zalim-code.com/picture/PIC/box/banner.gif" style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40) >

ถ้าเป็นลิงค์ ก้อทำแบบนี้นะค่ะ

<a href="http://www.zalim-code.com" target="_blank"><img src="http://www.zalim-code.com/picture/PIC/box/banner.gif" style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)> <a>

3. code ชี้link แล้วกลับด้าน

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <STYLE TYPE="TEXT/CSS"><!-- a:link { color: #ff0000; text-decoration: none} a:visited { color: #ff0000; text-decoration: none} a:active { color: #ff0000; text-decoration: none} a:hover { color: #ff0000; text-decoration: none;FILTER:fliph; HEIGHT:0} //--></STYLE> <!-- end code by zalim-code.com -->

4. code Link จาง

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style> A:LINK IMG{ filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) } A:HOVER IMG{ filter: Blur(Add = 0, Direction = 225, Strength = 1) } A:visited IMG{filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) } </style> <!-- end code by zalim-code.com -->

5. code ชี้ Link แล้วเป็นสีรุ้ง

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style> <!-- a{text-decoration:none} //--> </style> [ SCRIPT language=JavaScript> var rate = 20; // Increase amount(The degree of the transmutation) var obj; // The object which event occured in var act = 0; // Flag during the action var elmH = 0; // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg; // A color before the change var TimerID; // Timer ID if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) { Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow() { if (Browser && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (Browser && act != 0) { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (Browser && act != 1) { obj = event.srcElement; while (obj.tagName != ''''A'''' && obj.tagName != ''''BODY'''') { obj = obj.parentElement; if (obj.tagName == ''''A'''' || obj.tagName == ''''BODY'''') break; } if (obj.tagName == ''''A'''' && obj.href != '''''''') { act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (Browser && act != 0) { if (obj.tagName == ''''A'''') { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { obj.style.color = makeColor(); } function makeColor() { if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR); elmG = Math.floor(elmG); elmB = Math.floor(elmB); clrRGB = ''''#'''' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16); elmH = elmH + rate; if (elmH >= 360) elmH = 0; return clrRGB; } </SCRIPT> <!-- end code by zalim-code.com -->

6. code ชี้Link แล้วมีกรอบ

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style type="text/css"> <!-- a:hover {border-width : 3px;border-style : dotted;border-color : #000000; }--></style> <!-- end code by zalim-code.com -->

หมายเหตุ

เปลี่ยนสีตรง #000000 นะคะ ถ้าอยากเปลี่ยนรูปแบบของขอบให้ดูตรง dotted(จุดๆ)แล้วเปลี่ยนตามใจชอบดังนี้ค่ะ

- none คือ ไม่มีเส้น
- dotted คือ จุดๆ
- dashed คือ เส้นประ
- solid คือ เส้นเดี่ยว
- double คือ เส้นคู่

7. code คลิกLink แล้วมีแรเงาที่ LINK

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <script> function highlight(which,color){ if (document.all) which.style.backgroundColor=color } </script> <!-- end code by zalim-code.com -->

วางcode ไว้ส่วนของ body
<!-- start code by zalim-code.com --> <a href="linkไดอารี่หรือเว็บ" target="_blank" onmouseover="highlight(this,'โค๊ดสี')" onmouseout="highlight(this,'')">เขียนข้อความ</a><br /> <a href="http://www.zalim-code.com/CodeGifdiary.html" target="_blank" onmouseover="highlight(this,'โค๊ดสี')" onmouseout="highlight(this,'')">พิมพ์ข้อความ </a> <!-- end code by zalim-code.com -->

8. code Link จาง

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style> A:LINK IMG{ filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) } A:HOVER IMG{ filter: Blur(Add = 0, Direction = 225, Strength = 1) } A:visited IMG{filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) } </style> <!-- end code by zalim-code.com -->

9. code Linkสลับสองสี ช้าๆ

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <script language="JavaScript" type="text/javascript"> <!-- function initArray() { for (var i = 0; i < initArray.arguments.length; i++) { this[i] = initArray.arguments[i]; } this.length = initArray.arguments.length; } var colors = new initArray( "#FF3300", "#FF3333", "#FF3366", "#FF3399", "#FF33CC", "#FF33FF"); pause_time = .2; link = 0; vlink = 4; function linkDance() { link = (link+1)%colors.length; vlink = (vlink+1)%colors.length; //alert("link "+link+"\r\nvlink "+vlink+"\r\nvlinkColor "+document.vlinkColor); document.linkColor = colors[link]; document.vlinkColor = colors[vlink]; setTimeout("linkDance();",pause_time*1000); } linkDance(); // --> </script> <!-- end code by zalim-code.com -->

10. code ชี้ลิงค์แล้วเปลี่ยนเป็นภาพลูกเล่น

ตามที่เราให้แสดงเวลาชี้ลิงค์

วางcode ไว้ส่วนของ head

<!-- start code by zalim-code.com --> <style type="text/css">a:hover{background: url('url รูปภาพ'); }</style> <!-- end code by zalim-code.com -->