Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

JavaScript Button Effects

Previous page and Next pageImage buttonAlert button
Prompt buttonScrolling buttonRotating button
Confirmation button  

 

Javascript- Scrolling text on a 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">

<!-- begin

var 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.
javascript tutorial
javascript book
Buy this book