Home >> Tutorials >> Javascript tutorials
This is an example for displaying scrolling messages in a button using javascript.Eg:
Source Code:
<HTML> <body > <form name="testform"> <input type="button" name="messagebutton" size=130 value=""> </form> <script language="Javascript"> <!-- var MessageText= "This is a test message for scrolling text on a button" var MsgPosition=0; var MsgSeperator = "..."; function StartScrolling() { document.testform.messagebutton.value=MessageText.substring(MsgPosition,MsgPosition+60)+MsgSeperator + MessageText.substring(0, MsgPosition); MsgPosition++; if(MsgPosition>MessageText.length) MsgPosition=0; // repeat at entered speed window.setTimeout("StartScrolling()",100); }StartScrolling();// --></script> </body> </html> Top if you want to load a page when clicked ,add the following function.
function ButtonURL(){ window.location="test.html" } then change the <input type="button" name="messagebutton" size=130 value="" onclick="ButtonURL()"> Rotating button(Button with Rotating Text Following is the example for rotating button. It display a couple of interesting websites on a round-robin manner. On clicking it will take you to the corresponding website.<head> <SCRIPT LANGUAGE="JavaScript"><!-- beginvar MsgPosition =0; var ArrayItems=Array("CNN","infoseek","IBM","Yahoo","Excite","WEBGIMMICKS"); var URLArray=Array("http://www.cnn.com", "http://www.infoseek.com", "http://www.ibm.com","http://www.yahoo.com","http://www.excite.com", "http://www.webgimmicks.com")function StartRotating() { (MsgPosition <ArrayItems.length-1) ? MsgPosition++ : MsgPosition=0; document.forms[0].elements[0].value=ArrayItems[MsgPosition]; TimerHandle=window.setTimeout('StartRotating()',1000);} function LaunchURL() { this.location=URLArray[MsgPosition]; return (false); } // end --></SCRIPT></head> <BODY onLoad="window.StartRotating()"> <CENTER><FORM> <INPUT TYPE="button" VALUE=" Rotating button " NAME="RotateButton" onClick="window.LaunchURL()"> </FORM></CENTER> If you click this button, it will take you to the corresponding web site ... </body> Top
|
Page contents: itechies.net – Learn how to display a scrolling text message on a form button, or button with Rotating Text using javascript. |