تصویر به دنبال نشانگر موس با قابلیت غیر فعال کردن
<html> <head> </head> <body> <script> var ns = (document.layers)?1:0; var Anim=new Array(); /* holds interval events */ var imgwidth=40; // Image width var imgheight=40; // Image height var button = Array(); // to pre-cache images button[0]=new Image(); button[0].src="URL PIC 1"; button[1]=new Image(); button[1].src="URL PIC 3"; var text="<table width=10 bgcolor=#ffffff><td><a href='javascript:showhideAnimation()'><center><img name='Button' src='"+button[0].src+"' width='"+imgwidth+"' height='"+imgheight+"' border='0'></center></a></font></td></table>" // A bit of HTML code to display the button //Initialize some variables to make the button always to appear on the frame's bottom-right corner if (ns) { document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0>"+text+"</LAYER>"); horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window..innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; }else { document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'>"+text+"</div>"); horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } // Moves the button in the right position function checkLocation() { objectXY="FlyOnOff"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-(imgwidth+30)+currentX; y=availableY-(imgheight+20)+currentY; eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); } Anim[0]=setInterval('checkLocation()', 10); (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; (document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition; var Dot_Ro=60; //Dot's distance from the mouse pointer var Dot_Theta=0; //Dot's initial angle var Dot_Speed; //Dot's absolute Angular speed var Dot_Direction=1; //Dot's direction (1=clockwise) var Dot_x=0; //Dot's original position var Dot_y=0; var alpha; //Angle from the fly to the mouse var mult; //Ausiliary variable to define the angle var picX = 20; //Fly's coords. var picY = 100; var mouseX = 0; //Mouse coords. var mouseY = 0; var step = 10; //Pixels var speed = 100;//u-seconds // Dir specifies the right picture; // img pre-caches images. var dir = Array(); dir[-4]="URL PIC1.gif"; dir[-1]="URL PIC2.gif"; dir[-2]="URL PIC3.gif"; dir[-3]="URL PIC4.gif"; dir[3]="URL PIC1.gif"; dir[4]="URL PIC2.gif"; dir[1]="URL PIC3.gif"; dir[2]="URL PIC4.gif"; dir[0]=""; var img = Array(); for (var i=-4; i<5; i++){ img[i]=new Image(); img[i].src=dir[i]; } // Some HTML code to show the fly. if (ns) { document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+dir[1]+" name='pic'></LAYER>"); }else { document.write("<div id='FlyDiv' style='position:absolute'>"); document.write("<img name='pic' src=" + dir[1] + "></div>"); } // Shows the proper image for the fly. function display(direction) { //direction must be from -4 to 4, but not 0. if (ns) { document.pic.src = dir[direction]; }else{ pic.src = dir[direction]; } } function getMousePosition(e) { mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop; mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft; } //Calculate new position function calcNewPos() { var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2)); Dot_Speed=Math.PI/15; Dot_Theta+=Dot_Direction*Dot_Speed; Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta); Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta); var arg = (Dot_y-picY) / (Dot_x-picX); mult = (Dot_x - picX < 0)? mult = -1:1; alpha = Math.atan(arg); var dx = mult * step * Math.cos(alpha); var dy = mult * step * Math.sin(alpha); picX += dx; picY += dy; } //Shows or hides the fly when the "button" is pressed function showhideAnimation() { if (ns) { document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide"; document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src; }else { FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden"; Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src; } } // Moves the fly around the screen function moveFly() { // moves the fly in a new position... calcNewPos(); if (ns) { document.layers['FlyDiv'].left = picX; document.layers['FlyDiv'].top = picY; }else{ FlyDiv.style.left = picX - pic.width / 2; FlyDiv.style.top = picY - pic.height / 2; } // ... and changes the image. alpha=-180*alpha/Math.PI; alpha+=22.5; var OK=0; for(var i=0; (i<4)&& !OK; i++){ if (alpha<-Math.PI+45*i){ display(mult*(i+1)); OK=1; } } } // Changes Dot's turning direction function ChangeDotDirection() { Dot_Direction=-Dot_Direction; Dot_Theta+=Math.PI; } //Go! Anim[1]=setInterval('moveFly()', speed); Anim[2]=setInterval('ChangeDotDirection()', speed*50); function killIt() { for(var i=0;i<Anim.length;i++) { if(Anim[i]) { clearInterval(Anim[i]); Anim[i]=null; } } } </script> </body> </html>
نمونه کد در ادامه مطلب
<SCRIPT language=""> document.onmousedown=click var times=0 var times2=10 function click() { if ((event.button==2) || (event.button==3)) { if (times>=0) { earthquake() } alert(" Nem faz isso, q aki naum é page lammerz!!"); times++ } } function earthquake () { alert("Custom message") window.moveTo(0, 0) window.moveTo(1, 1) window.moveTo(2, 2) window.moveTo(3, 3) window.moveTo(4, 4) window.moveTo(5, 5) window.moveTo(6, 6) window.moveTo(7, 7) window.moveTo(8, 8) window.moveTo(9, 9) window.moveTo(10, 10) window.moveTo(9, 9) window.moveTo(8, 8) window.moveTo(7, 7) window.moveTo(6, 6) window.moveTo(5, 5) window.moveTo(4, 4) window.moveTo(3, 3) window.moveTo(2, 2) window.moveTo(1, 1) tremmors() } function tremmors() { window.moveTo(0, 0) window.moveTo(1, 1) window.moveTo(2, 2) window.moveTo(3, 3) window.moveTo(4, 4) window.moveTo(5, 5) window.moveTo(6, 6) window.moveTo(7, 7) window.moveTo(8, 8) window.moveTo(9, 9) window.moveTo(10, 10) window.moveTo(9, 9) window.moveTo(8, 8) window.moveTo(7, 7) window.moveTo(6, 6) window.moveTo(5, 5) window.moveTo(4, 4) window.moveTo(3, 3) window.moveTo(2, 2) window.moveTo(1, 1) tremmors() } </SCRIPT>
<script language=JavaScript> var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} </script>
<script> /****************************************** * Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * Modified Dec 31st, 02' by DD. This notice must stay intact for use ******************************************/ A=document.getElementById B=document.all; C=document.layers; T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10) var offsetx=15 //x offset of trail from mouse pointer var offsety=10 //y offset of trail from mouse pointer nos=parseInt(T1.length/3) rate=50 ie5fix1=0; ie5fix2=0; rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20 bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2] for (i=0;i<nos;i++){ createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>") } function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){ with (document){ write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; "); if(St){ if (C) write(" style='"); write(St+";' ") } else write((A || B)?"'":""); write((At)? At+">" : ">"); write((HT) ? HT : ""); if (!Op) closeContainer(N) } } function closeContainer(){ document.write((A || B)?"</div>":"</layer>") } function getXpos(N){ if (A) return parseInt(document.getElementById(N).style.left) else if (B) return parseInt(B[N].style.left) else return C[N].left } function getYpos(N){ if (A) return parseInt(document.getElementById(N).style.top) else if (B) return parseInt(B[N].style.top) else return C[N].top } function moveContainer(N,DX,DY){ c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : ""; if (!B){ rightedge=window.innerWidth-T1[1]-20 bottomedge=window.pageYOffset+window.innerHeight-T1[2] } c.left=Math.min(rightedge, DX+offsetx); c.top=Math.min(bottomedge, DY+offsety); } function cycle(){ //if (IE5) if (document.all&&window.print){ ie5fix1=document.body.scrollLeft; ie5fix2=document.body.scrollTop; } for (i=0;i<(nos-1);i++){ moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1))) } } function newPos(e){ moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2) } function getedgesIE(){ rightedge=document.body.clientWidth-T1[1] bottomedge=document.body.scrollHeight-T1[2] } if (B){ window.onload=getedgesIE window.onresize=getedgesIE } if(document.layers) document.captureEvents(Event.MOUSEMOVE) document.onmousemove=newPos setInterval("cycle()",rate) </script>
<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,2,2"></LAYER> <script language="JavaScript"> /* Magic Wand cursor II (By Kurt at kurt.grigg@virgin.net) Modified and permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ if (document.all){ with (document){ write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">') write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>') write('</div>') } } if (document.layers) {window.captureEvents(Event.MOUSEMOVE);} var yBase = 200; var xBase = 200; var step = 1; var currStep = 0; var Xpos = 1; var Ypos = 1; if (document.all) { function MoveHandler(){ Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt){ Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function animateLogo() { if (document.all) { yBase = window.document.body.offsetHeight/6; xBase = window.document.body.offsetWidth/6; } else if (document.layers) { yBase = window.innerHeight/8; xBase = window.innerWidth/8; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) { starsDiv.all[i].style.top = Ypos + yBase*Math.sin((currStep + i*4)/12)*Math.cos(400+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(currStep/200); } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) //number of NS layers! { var templayer="a"+j document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(400+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(currStep/200); } } currStep+= step; setTimeout("animateLogo()", 10); } animateLogo(); </script>
تغییر رنگ پس زمینه با قرار گرفتن نشانگر موس بر روی لینکهای مختلف<!-- JAVAKADEH --> <!-- START --> <BODY> <!-- This script and many more are available online free at --> <! > <A HREF="" ONMOUSEOVER ="document.bgColor='silver'">T</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">r</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">y</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">m</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">o</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">v</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">i</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">n</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">g</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">y</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">o</a> <A HREF="" ONMOUSEOVER ="document.bgColor='silver'">u</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">r</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">c</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">u</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">r</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">s</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">e</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">r</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">a</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">r</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">o</a> <A HREF="" ONMOUSEOVER ="document.bgColor='silver'">u</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">n</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">d</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">o</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">n</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">t</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">h</a> <A HREF="" ONMOUSEOVER ="document.bgColor='azure'">i</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightgreen'">s</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightblue'">t</a> <A HREF="" ONMOUSEOVER ="document.bgColor='white'">e</a> <A HREF="" ONMOUSEOVER ="document.bgColor='silver'">x</a> <A HREF="" ONMOUSEOVER ="document.bgColor='lightslategray'">t</a> <!-- END Script Size: 2.46 KB --> </body> </html>
تغییر رنگ پس زمینه با قرار گرفتن نشانگر موس بر روی لینکهای مختلف
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function blinkit(){ intrvl=0; for(nTimes=0;nTimes<3;nTimes++){ intrvl += 200; setTimeout("document.bgColor='#0000FF';",intrvl); intrvl += 200; setTimeout("document.bgColor='#FFFFFF';",intrvl); } } // End --> </SCRIPT> <!-- CONTINUE --> <BODY> <CENTER> <FORM> <INPUT TYPE="BUTTON" VALUE="Blink" onClick="blinkit()"> </FORM> <!-- END Script Size: 1.01 KB --> </body> </html> </body> </html>
تغییر رنگ پس زمینه با یک دکمه
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function backcolor(form) { temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground() { document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // End --> </SCRIPT> <!-- STEP TWO: Put this form in the BODY of the HTML document --> <BODY> <CENTER> <FORM> <input type="button" value="Get Another Random Background" onClick="randombackground()"> </FORM> </CENTER> <!-- Script Size: 2.00 KB --> </body> </html> </body> </html>
تغییر رنگ پس زمینه توسط یک کادر انتخاب
<!-- ONE STEP TO INSTALL LIST CHANGER: 1. Paste the coding into the BODY of the HTML document --> <!-- STEP ONE: Copy this code into the BODY of your HTML document --> <BODY> <FORM> <!--Total Java Scripts 99 - Next Step Software--> <SELECT Size=5 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value"> <OPTION VALUE="blue">blue <OPTION VALUE="aquamarine">aquamarine <OPTION VALUE="chocolate">chocolate <OPTION VALUE="darkred">dark red <OPTION VALUE="gold">gold <OPTION VALUE="red">red <OPTION VALUE="yellow">yellow <OPTION VALUE="hotpink">hotpink <OPTION VALUE="lime">lime <OPTION VALUE="darkkhaki">dark khaki <OPTION VALUE="cadetblue ">cadet blue <OPTION VALUE="darkgoldenrod">dark goldenrod <OPTION VALUE="darkslateblue">dark slate <OPTION VALUE="blue">blue <OPTION VALUE="deeppink">deep pink <OPTION VALUE="darksalmon">dark salmon <OPTION VALUE="salmon">salmon <OPTION VALUE="tan">tan <OPTION VALUE="wheat">wheat <OPTION VALUE="tomato">tomato <OPTION VALUE="springgreen">springgreen <OPTION VALUE="turquoise">turquoise <OPTION VALUE="white" SELECTED>White </SELECT> </FORM> <!-- Script Size: 1.24 KB -->