JavaScript Button Effects
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
