21. code การทำลิงค์ภาพแบบมัวๆ เมื่อคลิกภาพจะชัด มี2แบบ

1. ทำลิงค์ภาพมัวทั้งเว็บ

วาง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 -->

2. ทำลิงค์ภาพมัวเฉพาะภาพลิงค์ที่ต้องการจะให้มัวเท่านั้นมี 3 แบบ

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

<!-- start code by zalim-code.com --> <a href="ใส่Linkเวป" target="_blank"><img src="ใส่urlรูปwidth="100"" height="100" border="0" style="filter : Alpha(opacity=100, finishopacity=0, style=1)" /></a> <!-- end code by zalim-code.com -->

เลือกใช้ 3 style เพียงแก้ตรง คำว่าstyle แค่นั้นค่ะ ต่างกันคือ 1, 2 และ 3   ลองเปลี่ยนตัวเลขดูนะค่ะ

ได้ภาพแบบตัวอย่าง

style1 .  style2.
style3.  

22. code ทำลิงค์ ให้กับ ข้อความและลิงค์รูปภาพ

แบบพื้นฐาน มี 4 แบบ

2.ลิงค์ข้อความ แบบคลิกแล้ว ขึ้นหน้าใหม่ให้อีกหน้า

3. ลิงค์รูปภาพ เมื่อคลิก จะเปลี่ยนหน้าจากภาพนี้เลย

4. ลิงค์รูปภาพ เมื่อคลิกแล้วจะขึ้นหน้าใหม่ ให้อีกหน้า

23. ทำลิงค์ภาพ แบบคลิกแล้วภาพสลับไปมา

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

<!-- start code by zalim-code.com --> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <!-- end code by zalim-code.com -->

วางcode ตัวนี้ไว้ในส่วนที่ ต้องการให้ภาพแสดง

<!-- start code by zalim-code.com --> <a href="linkเว็บ" target="_blank" onMouseOver="MM_swapImage('Image93','','http://gamecenter.kapook.com/upload/cms/thumbnail/341-6812.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="urlรูปภาพ" alt="พิมพ์ข้อความ" name="Image93" id="Image93" /></a> <!-- end code by zalim-code.com -->

หมายเหตุ

1. <a href="Link web"   <= เปลี่ยนเป็นลิงค์ที่เราต้องการจะให้ไป

2. ('Image93','','ใส่url ภาพแรกที่เราจะแสดง',1)"   

3. onMouseOut="MM_swapImgRestore()"><img src="ใส่url ภาพที่เราจะเปลี่ยน" >  

4 alt="พิมพ์ข้อความ"    <= ใส่ข้อความเวลาชี้ไปภาพแล้วมีข้อความขึ้นนะค่ะ  

24. code Linkรูปภาพแบบกำหนดขนาดรูปภาพได้

เมื่อคลิ๊กที่ภาพจะได้ภาพขนาดเท่าขนาดจริง

<!-- start code by zalim-code.com --> <a href="url ภาพ ขนาดปกติที่เราจะให้คลิกไปดูภาพใหญ่" target="_blank"><img src="url ภาพที่เราทำให้มีขนาดเล็ก" width="50" height="50"></a> <!-- end code by zalim-code.com -->

หมายเหตุ

width="50" height="50"<= กำหนดขนาดภาพก่อนคลิกภาพเป็นภาพขนาดจริง

25. code ทำข้อความของเราค่อยๆ ปรากฏออกมา สามารถใส่ลิงค์ได้

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

<!-- start code by zalim-code.com --> <script language="" type="text/javascript"> var delay = 2000; //set delay between message change (in miliseconds) var maxsteps=30; // number of steps to take to change from start color to endcolor var stepdelay=40; // time in miliseconds of a single step //**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect var startcolor= new Array(255,255,255); // start color (red, green, blue) var endcolor=new Array(0,0,0); // end color (red, green, blue) var fcontent=new Array(); begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations fcontent[0]="<b>What\'s new?</b><br>สวัสดีครับ ยินดีต้อนรับเข้าสู่ Zalim-code.Com<br><br>รวมฟรีจาวาสคริปต์ <a href='http://www.zalim-code.com'>Click here to visit</a>"; fcontent[1]="สคริปต์ต่างๆ เอาไว้ให้ไปใช้ในการตกแต่ง เว็บเพจ เว็บไซต์ให้ดูดีสวยงาม อินเทรนด์."; fcontent[2]="สคริปต์ไหนติด มีปัญหา ใช้การไม่ได้ ต้องการปรึกษาทางเรา อีเมล์มาได้ที่ iee_ty@hotmail.comได้เลยจ้าาาา</a>"; closetag='</div>'; var fwidth='150px'; //set scroller width var fheight='150px'; //set scroller height var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes. ///No need to edit below this line///////////////// var ie4=document.all&&!document.getElementById; var DOM2=document.getElementById; var faderdelay=0; var index=0; /*Rafael Raposo edited function*/ //function to change content function changecontent(){ if (index>=fcontent.length) index=0 if (DOM2){ document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")" document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag if (fadelinks) linkcolorchange(1); colorfade(1, 15); } else if (ie4) document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag; index++ } // colorfade() partially by Marcio Galli for Netscape Communications. //////////// // Modified by Dynamicdrive.com function linkcolorchange(step){ var obj=document.getElementById("fscroller").getElementsByTagName("A"); if (obj.length>0){ for (i=0;i<obj.length;i++) obj[i].style.color=getstepcolor(step); } } /*Rafael Raposo edited function*/ var fadecounter; function colorfade(step) { if(step<=maxsteps) { document.getElementById("fscroller").style.color=getstepcolor(step); if (fadelinks) linkcolorchange(step); step++; fadecounter=setTimeout("colorfade("+step+")",stepdelay); }else{ clearTimeout(fadecounter); document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")"; setTimeout("changecontent()", delay); } } /*Rafael Raposo's new function*/ function getstepcolor(step) { var diff var newcolor=new Array(3); for(var i=0;i<3;i++) { diff = (startcolor[i]-endcolor[i]); if(diff > 0) { newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step); } else { newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step); } } return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")"); } if (ie4||DOM2) document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>'); if (window.addEventListener) window.addEventListener("load", changecontent, false) else if (window.attachEvent) window.attachEvent("onload", changecontent) else if (document.getElementById) window.onload=changecontent </script> <!-- end code by zalim-code.com -->

หมายเหตุ

begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>สวัสดีครับ ยินดีต้อนรับเข้าสู่ Zalim-code.Com<br><br>รวมฟรีจาวาสคริปต์ <a href='http://www.zalim-code.com'>Click here to visit</a>";
fcontent[1]="สคริปต์ต่างๆ เอาไว้ให้ไปใช้ในการตกแต่ง เว็บเพจ เว็บไซต์ให้ดูดีสวยงาม อินเทรนด์.";
fcontent[2]="สคริปต์ไหนติด มีปัญหา ใช้การไม่ได้ ต้องการปรึกษาทางเรา อีเมล์มาได้ที่ iee_ty@hotmail.comได้เลยจ้าาาา</a>";

ตรงส่วนนี้ข้อความสามารถแก้ไขได้นะค่ะ พร้อมทั้งใส่code ลิงค์ได้เลยลองหัดทำกันดูนะค่ะ

26. code สร้างภาพให้หมุนเวียนกันมาแสดง ภาพสามารถลิงค์ได้(โชว์แบนเนอร์)

วางโค๊ดในส่วนที่ต้องการแสดง

<!-- start code by zalim-code.com --> <script language="JavaScript1.2" type="text/javascript"> var scrollerwidth=88 var scrollerheight=31 var scrollerbgcolor='white' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<a href="Linkweb"><img src="urlpicture" border=0"></a>' slideimages[1]='<a href="Linkweb"><img src="urlpicture" border=0"></a>' slideimages[3]='<a href="Linkweb"><img src="urlpicture" border=0"></a>' slideimages[4]='<a href="Linkweb"><img src="urlpicture" border=0"></a>' if (slideimages.length>1) i=4 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",100) } else{ tlayer.top=scrollerheight tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",100) } else{ tlayer2.top=scrollerheight tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){ tdiv.style.pixelTop=0 setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2)",pausebetweenimages) return } if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){ tdiv.style.pixelTop-=5 setTimeout("move3(tdiv)",100) } else{ tdiv.style.pixelTop=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){ tdiv2.style.pixelTop=0 setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2)",pausebetweenimages) return } if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){ tdiv2.style.pixelTop-=5 setTimeout("move4(second2)",100) } else{ tdiv2.style.pixelTop=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (document.all){ move3(first2) second2.style.top=scrollerheight } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=scrollerheight+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};" visibility="hide"> <layer id="first" left="0" top="1" width="&{scrollerwidth};" > <script language="JavaScript1.2" type="text/javascript"> if (document.layers) document.write(slideimages[0]) </script> </layer><layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide"> <script language="JavaScript1.2" type="text/javascript"> if (document.layers) document.write(slideimages[1]) </script> </layer></ilayer><script language="JavaScript1.2" type="text/javascript"> if (document.all){ document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+ scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight +';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">') document.write(slideimages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') } </script> <!-- end code by zalim-code.com -->