Home >> Tutorials >> Javascript tutorials


Previous page and Next page
Image button Alert button Prompt button
Scrolling button Rotating button Confirmation button
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.