ManyCodes.com – codes & scripts Get free programming codes and tutorials!

29Jul/091

Have firelights after the mouse on your website

Here is how you can have firelights after the mouse on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<STYLE TYPE="text/css">
<!--

BODY{
overflow:scroll;
overflow-x:hidden;
}

.s1
{
 position  : absolute;
 font-size : 10pt;
 color     : blue;
 visibility: hidden;
}

.s2
{
 position  : absolute;
 font-size : 18pt;
 color     : red;
 visibility : hidden;
}

.s3
{
 position  : absolute;
 font-size : 14pt;
 color     : gold;
 visibility : hidden;
}

.s4
{
 position  : absolute;
 font-size : 12pt;
 color     : lime;
 visibility : hidden;
}

//-->
</STYLE>


<DIV ID="div1">*</DIV>
<DIV ID="div2">*</DIV>
<DIV ID="div3">*</DIV>
<DIV ID="div4">*</DIV>

<p align="center">
<font face="arial, helvetica" size="-2"><a
Kit</a></font></p>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">



var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function get_mouse(e)
{
 x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
 y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
 x += x_offset;
 y += y_offset;
 beam(1);
}

function beam(n)
{
 if(n<5)
 {
 if(nav)
 {
 eval("document.div"+n+".top="+y);
 eval("document.div"+n+".left="+x);
 eval("document.div"+n+".visibility='visible'");
 }
 else
 {
 eval("div"+n+".style.top="+y);
 eval("div"+n+".style.left="+x);
 eval("div"+n+".style.visibility='visible'");
 }
 n++;
 tmr=setTimeout("beam("+n+")",spd);
 }
 else
 {
 clearTimeout(tmr);
 fade(4);
 }
}

function fade(n)
{
 if(n>0)
 {
 if(nav)eval("document.div"+n+".visibility='hidden'");
 else eval("div"+n+".style.visibility='hidden'");
 n--;
 tmr=setTimeout("fade("+n+")",spd);
 }
 else clearTimeout(tmr);
}

// -->
</SCRIPT><font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
29Jul/091

How to change status bar when moving mouse on picture on your website

Here is how you can change status bar when moving mouse on picture on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
!-- This displays 'Your Message Here' in the status bar when the mouse -->
<!--    pointer is over the 'Put Image Here' image -->

<CENTER>
<A HREF="URL"  onMouseOver="window.status='Your Message Here'; return true"
onMouseOut="window.status=''">
<P><IMG SRC="Put Image Here"></A>
</CENTER>

<!-- This displays 'Your Message Here' in the status bar when the mouse -->
<!--    pointer is over the 'Put Image Here' image -->

<CENTER>
<A HREF="URL"  onMouseOver="window.status='Your Message Here'; return true"
onMouseOut="window.status=''">
<P><IMG SRC="Put Image Here"></A>
</CENTER>
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to have two lines following mouse on your website

Here is how you can have two lines following mouse on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!-- START OF Mouse Cursor Crosshairs DHTML -->


<!-- SUMMARY BRIEF

 This DHTML script will make a crosshair to follow
 your mouse cursor around.

 You can change the color of the crosshair by changing
 the color hex codes in the <style> tag in the <head>
 of your document.

-->


<!-- Put this portion of the script inside of your <HEAD> tag -->


<style>
<!--

#leftright, #topdown{

 position: absolute;
 left: 0;
 top: 0;
 width: 1px;
 height: 1px;
 layer-background-color: #FF0000;
 background-color: #FF0000;
 z-index: 100;
 font-size: 1px;
}

-->
</style>


<!-- Put this code after your <BODY> tag. -->


<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>

<script language="JavaScript1.2">
<!--

if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}


function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

//-->
</script>


<!-- END OF Mouse Cursor Crosshairs DHTML -->

<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
28Jul/090

How to put a text following mouse on your website

Here is how you can put a text following mouse on your website.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->
<!-- START OF Mouse Cursor Text Trailer DHTML -->

<!-- SUMMARY BRIEF

 This DHTML script will make a text message follow
 your cursor around the screen. You can change the
 message to say whatever you want.

 You can change the font face, color and size in
 the .trailersytle tag below. You can change the message
 in the javascript below that. Just look for the
 comment that says "Insert your personal message below."

-->

<!-- Put this portion of the script inside of your <HEAD> tag -->

<style>
.trailerstyle {
 position: absolute;
 visibility: visible;
 top: -50px;
 font-size: 12px;
 font-family: Arial,Helvetica,Verdana;
 font-weight: bold;
 color: #000000;
}
</style>

<script>
<!--

var x,y
var step=20
var flag=0

// Insert your personal message below.
// Important: Do NOT remove the space at the end of the sentence!!!

var message=" www.javascriptfreecode.com "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
 xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
 ypos[i]=-50
}

function handlerMM(e){
 x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
 y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
 flag=1
}

function mousetrailer() {
 if (flag==1 && document.all) {
 for (i=message.length-1; i>=1; i--) {
 xpos[i]=xpos[i-1]+step
 ypos[i]=ypos[i-1]
 }
 xpos[0]=x+step
 ypos[0]=y

 for (i=0; i<message.length-1; i++) {
 var thisspan = eval("span"+(i)+".style")
 thisspan.posLeft=xpos[i]
 thisspan.posTop=ypos[i]
 }
 }

 else if (flag==1 && document.layers) {
 for (i=message.length-1; i>=1; i--) {
 xpos[i]=xpos[i-1]+step
 ypos[i]=ypos[i-1]
 }
 xpos[0]=x+step
 ypos[0]=y

 for (i=0; i<message.length-1; i++) {
 var thisspan = eval("document.span"+i)
 thisspan.left=xpos[i]
 thisspan.top=ypos[i]
 }
 }
 var timer=setTimeout("mousetrailer()",30)
}

//-->
</script>

<!-- Put this code inside of your <BODY> tag. -->

<script>
<!--

for (i=0;i<=message.length-1;i++) {
 document.write("<span id='span"+i+"' class='trailerstyle'>")
 document.write(message[i])
 document.write("</span>")
}

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

//-->
</script>

<!-- Lastly, insert the following into the <BODY> tag, itself, just like the example that follows. -->

<body onLoad="mousetrailer()" style="width:100%;overflow-x:hidden;overflow-y:scroll">

<!-- END OF Mouse Cursor Text Trailer DHTML -->
<pre><font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/category/java/javascript-codes/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font></pre>
Tagged as: , , No Comments
22Jul/090

How to make hearts following the mouse pointer trail on your webpage

Here is how you can make hearts following the mouse pointer trail on your webpage. Brighten your webpage by adding this trail to the mouse pointer on your site.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<!-- this script is from www.manycodes.com -->

<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot1" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot2" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot3" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot4" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot5" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>
<div id="dot6" style="position: absolute; height: 11; width: 11;">
 <img src="http://www.javascriptfreecode.com/heart.gif" height=11 width=11>
</div>

<script LANGUAGE="JavaScript">
<!-- hide code

var nDots = 7;

var Xpos = 0;
var Ypos = 0;

 // fixed time step, no relation to real time
var DELTAT = .01;
 // size of one spring in pixels
var SEGLEN = 10;
 // spring constant, stiffness of springs
var SPRINGK = 10;
 // all the physics is bogus, just picked stuff to
 // make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
 // stopping criterea to prevent endless jittering
 // doesn't work when sitting on bottom since floor
 // doesn't push back so acceleration always as big
 // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
 // BOUNCE is percent of velocity retained when
 // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

 // always on for now, could be played with to
 // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
 var i = 0;
 for (i = 0; i < nDots; i++) {
 dots[i] = new dot(i);
 }

 if (!isNetscape) {
 // I only know how to read the locations of the
 // <LI> items in IE
 //skip this for now
 // setInitPositions(dots)
 }

 // set their positions
 for (i = 0; i < nDots; i++) {
 dots[i].obj.left = dots[i].X;
 dots[i].obj.top = dots[i].Y;
 }

 if (isNetscape) {
 // start right away since they are positioned
 // at 0, 0
 startanimate();
 } else {
 // let dots sit there for a few seconds
 // since they're hiding on the real bullets
 setTimeout("startanimate()", 1000);
 }
}

function dot(i)
{
 this.X = Xpos;
 this.Y = Ypos;
 this.dx = 0;
 this.dy = 0;
 if (isNetscape) {
 this.obj = eval("document.dot" + i);
 } else {
 this.obj = eval("dot" + i + ".style");
 }
}

function startanimate() {
 setInterval("animate()", 20);
}

// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
 // initialize dot positions to be on top
 // of the bullets in the <ul>
 var startloc = document.all.tags("LI");
 var i = 0;
 for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
 dots[i+1].X = startloc[i].offsetLeft
 startloc[i].offsetParent.offsetLeft - DOTSIZE;
 dots[i+1].Y = startloc[i].offsetTop +
 startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
 }
 // put 0th dot above 1st (it is hidden)
 dots[0].X = dots[1].X;
 dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
 Xpos = e.pageX;
 Ypos = e.pageY;
 return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
 Xpos = window.event.x + document.body.scrollLeft;
 Ypos = window.event.y + document.body.scrollTop;
}

if (isNetscape) {
 document.captureEvents(Event.MOUSEMOVE);
 document.onMouseMove = MoveHandler;
} else {
 document.onmousemove = MoveHandlerIE;
}

function vec(X, Y)
{
 this.X = X;
 this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
 var dx = (dots[i].X - dots[j].X);
 var dy = (dots[i].Y - dots[j].Y);
 var len = Math.sqrt(dx*dx + dy*dy);
 if (len > SEGLEN) {
 var springF = SPRINGK * (len - SEGLEN);
 spring.X += (dx / len) * springF;
 spring.Y += (dy / len) * springF;
 }
}

function animate() {
 // dots[0] follows the mouse,
 // though no dot is drawn there
 var start = 0;
 if (followmouse) {
 dots[0].X = Xpos;
 dots[0].Y = Ypos;
 start = 1;
 }

 for (i = start ; i < nDots; i++ ) {

 var spring = new vec(0, 0);
 if (i > 0) {
 springForce(i-1, i, spring);
 }
 if (i < (nDots - 1)) {
 springForce(i+1, i, spring);
 }

 // air resisitance/friction
 var resist = new vec(-dots[i].dx * RESISTANCE,
 -dots[i].dy * RESISTANCE);

 // compute new accel, including gravity
 var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
 (spring.Y + resist.Y)/ MASS + YGRAVITY);

 // compute new velocity
 dots[i].dx += (DELTAT * accel.X);
 dots[i].dy += (DELTAT * accel.Y);

 // stop dead so it doesn't jitter when nearly still
 if (Math.abs(dots[i].dx) < STOPVEL &&
 Math.abs(dots[i].dy) < STOPVEL &&
 Math.abs(accel.X) < STOPACC &&
 Math.abs(accel.Y) < STOPACC) {
 dots[i].dx = 0;
 dots[i].dy = 0;
 }

 // move to new position
 dots[i].X += dots[i].dx;
 dots[i].Y += dots[i].dy;

 // get size of window
 var height, width;
 if (isNetscape) {
 height = window.innerHeight + window.pageYOffset;
 width = window.innerWidth + window.pageXOffset;
 } else {
 height = document.body.clientHeight + document.body.scrollTop;
 width = document.body.clientWidth + document.body.scrollLeft;
 }

 // bounce off 3 walls (leave ceiling open)
 if (dots[i].Y >=  height - DOTSIZE - 1) {
 if (dots[i].dy > 0) {
 dots[i].dy = BOUNCE * -dots[i].dy;
 }
 dots[i].Y = height - DOTSIZE - 1;
 }
 if (dots[i].X >= width - DOTSIZE) {
 if (dots[i].dx > 0) {
 dots[i].dx = BOUNCE * -dots[i].dx;
 }
 dots[i].X = width - DOTSIZE - 1;
 }
 if (dots[i].X < 0) {
 if (dots[i].dx < 0) {
 dots[i].dx = BOUNCE * -dots[i].dx;
 }
 dots[i].X = 0;
 }

 // move img to new position
 dots[i].obj.left = dots[i].X;
 dots[i].obj.top =  dots[i].Y;
 }
}

// end code hiding -->
</script>
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font>
22Jul/091

Don’t let the user use right click on mouse

Here is how you can disable right-click on your webpage.

Put the code below within your site's source code. If you dont know how to implement this code into your site, please goto how to implement the code to your website

Code:

<pre><!-- this script is from www.manycodes.com --></pre>
</style>
<SCRIPT language=JavaScript>
document.onmousedown=click
var times=0
var times2=10
function click() {
if ((event.button==2) || (event.button==3)) {
if (times>=1) { bye() }
alert("No right clicking!!!!!! don't do it again..");
times++ } }
function bye() {
alert("I said NO right clicking! click ok to exit LMAO!");
bye() }
</SCRIPT>
<pre>
<font face="Tahoma"><a target="_blank" href="http://www.manycodes.com/"><span style="font-size: 8pt; text-decoration: none">JavaScript Free Code</span></a></font></pre>
Tagged as: , , , , , , , , 1 Comment