SIVANANDA REDDY GANGIREDDY: 05/01/2011

Friday, May 20, 2011

Change Image on Mouseover Javascript

This is a small javascript that changes an image on mouseover. Run your mouse on the image above to see the rollover effect. The image contains a link and is a great script for any webpage.
The mouseover script is also useful for those learning javascript. Have a look at the code and see how easy it is to follow.
Works with most browsers, IE 4 and above. Not with netscape.
Installation:
STEP 1.
Make 2 images which you would like to display. You can name them #1 and #2 if you wish and they can be jpg or gif format. Upload the images to your server.
STEP 2
Copy the code below and paste this between the <head> and </head> tags of your html document. Point the script to where the images reside on your webhost. By this I mean change image source lines:
image1.src = 'images/rollover1.jpg' and
image2.src='images/rollover2.jpg'
The lines in red should show where your images are stored and your image name. The example shows that my images are stored in the images folder and the names are rollover1.jpg and rollover2.jpg. You may need to use your full url such as http://wwww.yoursite.com/image1.jpg

if (document.images)

{ image1 = new Image image2 = new Image image1.src = 'images/rollover1.jpg' image2.src

= 'images/rollover2.jpg' } </script>

STEP 3.
Copy the code below and paste this into the body of your html document, where you want the images to appear on your webpage.
Again change the image source to suit at this line; img src="images/rollover1.jpg"
(Note that you only need to change the image1 here. The second image is called by the script.)

<a href="http://www.siivananda.com"

onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src">

That's it. Good luck.

Site Update Javascript with Slideshow Effect

Tell your visitors what's new or give updates to your site with this great space saving message slideshow javascript. A description of each new or updated page is delivered within the text area for a given amount of time.
Could be used not only for website updates but many other uses, such as affiliate links, link rotation, the possibilities are endless.
The update message script provides a button so that visitors can visit the link to each message. Very easy to install and configure. Just add your messages and links. Can hold countless number of messages.
Installation
Copy and paste the code below between the <body> and </body> tags of your html document where you want the text box to appear on your webpage. Simply replace the messages and links with your own. All instructions for messages and links are contained within the script
<table
border="0" cellspacing="0" cellpadding="0"> <tr>
<td width="100%"> <form name="slideshow"> <div
align="center"> <center> <p><b><font color="#0000CC">What's
New at Hypergurl!</font></b><br> <textarea rows="5"
name="S1" cols="40" wrap="virtual"></textarea>
<br> <input type="button" value="Click Here!" name="B1"
onClick="window.location=messagelinks[curmsg]"> </p> </center>
</div> </form> </td> </tr> </table> </div>
<div align="center">
<script>
var curmsg=-1 var messages=new Array()
messages[0]="Message 1 here! very eye catching. Grab the code now!"
messages[1]="Message 2 here! Read our article on link popularity!" messages[2]="message
3 here! Disable right click and protect your source code!" //add more messages
as desired var messagelinks=new Array() messagelinks[0]="http://www.yoursite.com"
messagelinks[1]="http://www.yoursite.com" messagelinks[2]="http://www.yoursite.com"
//add more links as indicated by the number of messages function slidemessage(){
if (curmsg<messages.length-1) curmsg++ else curmsg=0 document.slideshow[0].value=messages[curmsg]
setTimeout("slidemessage()",4500) } slidemessage() </script> </div>
Enjoy!

Online Typing Test Javascript

This is a great javascript that will make your sites stickability even better. The online typing test will keep your visitors at your site longer and have them coming back for more. Easy 2 step installation and what's even better, there's nothing at all to change in the scripts.
Why not take the online typing test yourself and see how good your typing skills are?

STEP 1

Copy and paste the script below into the head of your html document.

<SCRIPT LANGUAGE="JavaScript">
msg = new Array("Practicing
with your typing can greatly help your overall computer skills.", "A
new computer is sold in the US every hour!", "When do birds migrate
from North to South?", "Perplexing phrases, like this one, are tougher
to type.") word = 10 function m() { msg = new Array("Practicing with
your typing can greatly help your overall computer skills.", "A new
computer is sold in the US every hour!", "When do birds migrate from
North to South?", "Perplexing phrases, like this one, are tough to type.")
word = 10 } function e() { msg = new Array("If you can correctly, and quickly,
type this perplexing sentence, you are one superb typist!", "You are
one superb typist if you can correctly, and quickly, type this long phrase.",
"I believe you're a good typist, so I believe you will correctly copy this
statement!", "Because this is not a fairly simple phrase, could you
swiftly, and precisely, copy it?") word = 15 } function s() { msg = new Array("Computers
are the medium of the future.", "Can you type this phrase rather quickly?",
"Who is the President of the US?", "I believe that you can type
well!") word = 7 } function beginIt() { randNum = Math.floor((Math.random()
* 10)) % 4 msgType = msg[randNum] day = new Date(); startType = day.getTime();
document.theForm.given.value = msgType document.theForm.typed.focus(); document.theForm.typed.select();
} function cheat() { alert("You can not change that!"); document.theForm.typed.focus();
} function stopIt() { dayTwo = new Date(); endType = dayTwo.getTime(); totalTime
= ((endType - startType) / 1000) spd = Math.round((word/totalTime) * 60) if (document.theForm.typed.value
== document.theForm.given.value) { alert("\nYou typed a " + word + "
word sentence in " + totalTime + " seconds, a speed of about "
+ spd + " words per minute!") } else { alert("You made an error,
but typed at a speed of " + spd + " words per minute.") } } //
End --> </SCRIPT>
STEP 2
Copy and paste the script below where you want the online typing test to appear on your webpage.
<CENTER>
<FORM name="theForm"> <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>
<TR> <TD>Are you a....</TD> <TD align=center><input
type=radio name="sme" value="Beginner" onClick="s()"
checked>Beginner <input type=radio name="sme" value="Novice"
onClick="m()">Novice <input type=radio name="sme" value="Expert"
onClick="e()">Expert</TD> </TR> <TR><TD colspan=2><BR>
<center><input type=button value="Start Typing Test" name="start"
onClick="beginIt()"></center><P> <textarea name="given"
cols=53 rows=3 wrap=on onFocus="cheat()"></textarea></TD>
</TR> <TR><TD colspan=2><center><input type=text name="typed"
size=45> <input type=button value="DONE" name="stop"
onClick="stopIt()"></center></TD> </TR> </TABLE></FORM>
</CENTER>

That's it! Good typing!

Underwater Bubbles Cursor

This trailing cursor javascript effect looks to be underwater with bubble images rising from the mouse cursor to the top of the screen. The underwater bubble script is more effective on webpages with a lighter background.
The underwater bubbles cursor is easy to install. Follow the simple instructions below.
STEP 1

Right click on this bubble image.

Save the bubble image to your hard drive and upload this to your server. Place the bubble image into the same folder as your html page.

STEP 2
Copy the javascript code below and paste this on the line below the <body> tag of your html document. There is nothing at all to change within the code.

<script

language="JavaScript">

n4=(document.layers);

n6=(document.getElementById&&!document.all); ie=(document.all); o6=(navigator.appName.indexOf("Opera")

!= -1)?true:false; img0=new Image(); img0.src="bluebub.gif"; num=(n6)?10:15;

y=0; x=0; if (n4||n6){ window.captureEvents(Event.MOUSEMOVE); function mouse1(e){

y = e.pageY-20-window.pageYOffset; x = e.pageX-4; } if (n4) window.onMouseMove=mouse1;

else document.onmousemove=mouse1; } if (ie||o6){ function mouse2(){ y = (ie)?event.clientY-20:event.clientY-20-window.pageYOffset;

x = event.clientX-4; } document.onmousemove=mouse2; } yp=new Array(); xp=new Array();

sp=new Array(); rt=new Array(); gr=new Array(); s1=new Array(); s2=new Array();

nz=new Array(); wh=(ie)?window.document.body.clientHeight:window.innerHeight;

for (i=0; i < num; i++){ yp[i]=Math.random()*wh-y; xp[i]=x; sp[i]= 6+Math.random()*3;

s1[i]=0; s2[i]=Math.random()*0.1+0.05; gr[i]=4; nz[i]=Math.random()*15+5; rt[i]=Math.random()*0.5+0.1;

} if (n4){ for (i=0; i < num; i++){ document.write("<LAYER NAME='bub"+i+"'

LEFT=0 TOP=-50>" +"<img src='bluebub.gif' width="+nz[i]+"

height="+nz[i]+"></LAYER>"); } } if (ie){ document.write('<div

style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < num; i++){ document.write('<img id="bub'+i+'" src="'+img0.src+'"

style="position:absolute;top:-50px;left:0px">'); } document.write('</div></div>');

} if (n6||o6){ for (i=0; i < num; i++){ document.write("<div id='bub"+i+"'

style='position:absolute;top:-50px;left:0px'>" +"<img src="+img0.src+"

width="+nz[i]+" height="+nz[i]+"></div>"); }

} function MouseBubbles(){ scy=(document.all)?document.body.scrollTop:window.pageYOffset;

scx=(document.all)?document.body.scrollLeft:window.pageXOffset; for (i=0; i <

num; i++){ sy = sp[i]*Math.sin(270*Math.PI/180); sx = sp[i]*Math.cos(s1[i]*5);

yp[i]+=sy; xp[i]+=sx; if (yp[i] < -40){ yp[i]=y; xp[i]=x; sp[i]= 6+Math.random()*3;

gr[i]=4; nz[i]=Math.random()*15+5; } if (n4){ document.layers["bub"+i].left=xp[i]+scx;

document.layers["bub"+i].top=yp[i]+scy; } if (ie){ document.getElementById("bub"+i).style.left=xp[i]+scx;

document.getElementById("bub"+i).style.top=yp[i]+scy; document.getElementById("bub"+i).style.width=gr[i];

document.getElementById("bub"+i).style.height=gr[i]; } if (n6||o6){

document.getElementById("bub"+i).style.left=xp[i]+scx; document.getElementById("bub"+i).style.top=yp[i]+scy;

} gr[i]+=rt[i]; s1[i]+=s2[i]; if (gr[i] > 14) gr[i]=15; } setTimeout('MouseBubbles()',10);

} MouseBubbles(); //--> </script>

That's it!

Hit the Dots Javascript Game

Great online javascript game for your website. Hit the Dots is played by clicking as many dots that are randomly generated by the computer. Your scrore is recorded so you can try again and beat your best.
Warning ! This online game is very addictive. Your visitors might never leave.
Grab the code now!

STEP 1
Copy the code below and place this into the <head> of your html document.

gamelength=30; timerID=null var playing=false; var numholes=6*10;

var currentpos=-1; function clrholes() { for(var k=0;k<document.dmz.elements.length;k++)

document.dmz.elements[k].checked=false; } function stoptimer() { if(playing) clearTimeout(timerID);

} function showtime(remtime) { document.cpanel.timeleft.value=remtime; if(playing)

{ if(remtime==0) { stopgame(); return; } else { temp=remtime-1; timerID=setTimeout("showtime(temp)",1000);

} } } function stopgame() { stoptimer(); playing=false; document.cpanel.timeleft.value=0;

clrholes(); display("Game Over"); alert('Game Over.\nYour score is:

'+totalhits); } function play() { stoptimer(); if(playing) { stopgame(); return;

} playing=true; clrholes(); totalhits=0; document.cpanel.score.value=totalhits;

display("Playing"); launch(); showtime(gamelength); } function display(msg)

{ document.cpanel.state.value=msg; } function launch() { var launched=false; while(!launched)

{ mynum=random(); if(mynum!=currentpos) { document.dmz.elements[mynum].checked=true;

currentpos=mynum; launched=true; } } } function hithead(id) { if(playing==false)

{ clrholes(); display("Push Start to Play"); return; } if(currentpos!=id)

{ totalhits+=-1; document.cpanel.score.value=totalhits; document.dmz.elements[id].checked=false;

} else { totalhits+=1; document.cpanel.score.value=totalhits; launch(); document.dmz.elements[id].checked=false;

} } function random() { return(Math.floor(Math.random()*100%numholes)); } // End

--> </script>

STEP 2
Copy the code below and paste this between the <body> and </body> tags of your html document, where you want the game to appear on your webpage.

<center>Test your skill. How many boxes can you check in 30 seconds?</center>

<tr> <td><input type="button" name="startstop"

value=" Start Game | Stop Game " onClick="play()"></td>

<td><input type="text" name="timeleft" size="4"

onFocus="this.blur()"></td> </tr> <tr> <td><input

type="text" name="state" size="20" value="Push

Start to Play" onFocus="this.blur()"></td> <td><pre>

</pre></td> <td align=right>Score:</td> <td><input

type="text" name="score" size="4" onFocus="this.blur()"></td>

</tr> </table> </center> </form> <form name="dmz">

<center> <table cellspacing=3> <tr> <td colspan=10><hr

size=1></td> </tr> <tr> <td align="center" valign="center"><input

type="radio" onClick="hithead(0)"></td> <td align="center"

valign="center"><input type="radio" onClick="hithead(1)"></td>