http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FForm_Control%2FButton
JavaScript DHTML/Form Control/Button - История изменений
2026-04-04T15:11:30Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Button&diff=2512&oldid=prev
в 09:59, 26 мая 2010
2010-05-26T09:59:59Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:59, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Button&diff=2513&oldid=prev
Admin: 1 версия
2010-05-26T07:21:54Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Animating Buttons with JavaScript==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>JavaScript Unleashed</title><br />
<script type="text/javascript" language="JavaScript1.1"><br />
<!--<br />
<br />
// Define image objects<br />
var prevBtnOff = new Image(42, 52);<br />
prevBtnOff.src = "http://www.wbex.ru/style/logo.png";<br />
<br />
var prevBtnOn = new Image(42, 52);<br />
prevBtnOn.src = "http://www.wbex.ru/style/logoRed.png";<br />
<br />
var nextBtnOff = new Image(42, 52);<br />
nextBtnOff.src = "http://www.wbex.ru/style/logo.png";<br />
<br />
var nextBtnOn = new Image(42, 52);<br />
nextBtnOn.src = "http://www.wbex.ru/style/logoRed.png";<br />
<br />
// Changes image being displayed.<br />
function highlightButton(placeholder, imageObject) {<br />
document.images[placeholder].src = eval(imageObject + ".src")<br />
}<br />
<br />
//--><br />
</script><br />
</head><br />
<body background="./aiback.gif"><br />
<center><br />
<a href="javascript:history.back()"<br />
onmouseover="highlightButton("Prev","prevBtnOn");<br />
window.status="Previous";<br />
return true;"<br />
onmouseout="highlightButton("Prev","prevBtnOff");<br />
window.status="";<br />
return true;"><br />
<img src="./prev_off.gif" border="0" width="52" height="42" name="Prev"><br />
</a><br />
<a href="javascript:history.forward()"<br />
onmouseover="highlightButton("Next","nextBtnOn");<br />
window.status="Next";<br />
return true;"<br />
onmouseout="highlightButton("Next","nextBtnOff");<br />
window.status="";<br />
return true;"><br />
<img src="./next_off.gif" border="0" width="52" height="42" name="Next"><br />
</a><br />
</center><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Assign JavaScript function to button onClick event handler==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<SCRIPT language="JavaScript"><br />
function send_alerts()<br />
{<br />
window.alert("Hi!");<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM><br />
<INPUT type="button" value="Click Me" onClick="send_alerts();"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button and Check Box Event Handling==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Button and Check Box Events</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><!--<br />
function showResults() {<br />
var resultMsg=""<br />
if(document.survey.age[0].checked) resultMsg+="under 30, "<br />
if(document.survey.age[1].checked) resultMsg+="between 30 and 60, "<br />
if(document.survey.age[2].checked) resultMsg+="over 60, "<br />
if(document.survey.sex[0].checked) resultMsg+="male, "<br />
if(document.survey.sex[1].checked) resultMsg+="female, "<br />
if(document.survey.reading.checked) resultMsg+="reading, "<br />
if(document.survey.eating.checked) resultMsg+="eating, "<br />
if(document.survey.sleeping.checked) resultMsg+="sleeping, "<br />
<br />
alert(resultMsg);<br />
}<br />
function upperCaseResults() {<br />
var newResults=document.survey.results.value<br />
alert(newResults.toUpperCase());<br />
}<br />
//--></SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM NAME="survey"><br />
<H2 ALIGN="CENTER">Survey Form</H2><br />
<P><B>Age:</B><br />
<INPUT TYPE="RADIO" NAME="age" VALUE="under30" ONCLICK="showResults()">Under 30<br />
<INPUT TYPE="RADIO" NAME="age" VALUE="30to60" ONCLICK="showResults()">30 - 60<br />
<INPUT TYPE="RADIO" NAME="age" VALUE="over60" ONCLICK="showResults()">Over 60</P><br />
<P><B>Sex: </B><br />
<INPUT TYPE="RADIO" NAME="sex" VALUE="male" ONCLICK="showResults()">Male<br />
<INPUT TYPE="RADIO" NAME="sex" VALUE="female" ONCLICK="showResults()">Female</P><br />
<P><B>Interests: </B><br />
<INPUT TYPE="CHECKBOX" NAME="reading" ONCLICK="showResults()"> Reading<br />
<INPUT TYPE="CHECKBOX" NAME="eating" ONCLICK="showResults()"> Eating<br />
<INPUT TYPE="CHECKBOX" NAME="sleeping" ONCLICK="showResults()"> Sleeping</P><br />
<P><br />
<INPUT TYPE="BUTTON" NAME="makeUpper" VALUE="To Upper Case" ONCLICK="upperCaseResults()"></P><br />
<P><B>Results: </B><INPUT TYPE="TEXT" NAME="results" SIZE="50"></P><br />
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit" ONCLICK="return confirm("Sure?")"><br />
<INPUT TYPE="RESET" NAME="reset" ONCLICK="return confirm("Sure?")"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button Click action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<BODY><br />
<FORM><br />
<INPUT type="button" value="Change Status!" onClick="window.status="Hey there!";"><br />
<P><br />
<INPUT type="button" value="Clear Status!" onClick="window.status="";"><br />
</FORM><br />
<P><br />
<A HREF="noplace" onMouseOver="window.location="http://www.wbex.ru";">No need to click this link.</A><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button click to display dialog==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
Examples From<br />
JavaScript: The Definitive Guide, Fourth Edition<br />
Legal matters: these files were created by David Flanagan, and are<br />
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and<br />
distribute them for any purpose. Please note that these examples are<br />
provided "as-is" and come with no warranty of any kind.<br />
David Flanagan<br />
*/<br />
<form><br />
<input type="button"<br />
value="Click here" <br />
onclick="alert("You clicked the button");"><br />
</form><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button "default Value" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = document.getElementById("myButton").defaultValue;<br />
alert("The value of this element is: "+"""+m+"""); <br />
} <br />
</script><br />
<input id="myButton" type="button" value="Click here" onclick="function1();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button disabled Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script><br />
function function1() {<br />
document.all.myButton.disabled = true;<br />
}<br />
function function2() {<br />
document.all.myButton.disabled = false;<br />
}<br />
</script><br />
<input id="myButton" type="button" value="Disable" onClick="function1();"><br />
<input type="button" value="Enable" onClick="function2();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button On Click Action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<HTML><br />
<BODY><br />
<FORM><br />
<INPUT TYPE="button" value="Page Resource" onClick="window.location="http://www.wbex.ru""><br />
<P><br />
<INPUT TYPE="button" value="JavaScript City" onClick="window.location="http://www.wbex.ru""><br />
<P><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button on click event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<BODY><br />
<A HREF="http://www.wbex.ru" onMouseOver="window.alert("over!");">wbex!</A> <br />
<P><br />
<FORM><br />
Phone Number: <INPUT type="text" size="25" onFocus="window.alert("on focus");"> <br />
<BR><br />
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");"><br />
<BR><br />
E-mail Address: <INPUT type="text" size="25"><br />
<P><br />
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button parent Element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<form id="myF"><br />
<input id="myButton" <br />
type="button" value="Show my parent" onclick="function1();"><br />
</form><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = document.all.myButton.parentElement.id;<br />
alert("Parent element: <FORM>, ID = "+"""+m+"""); <br />
} <br />
</script><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button parentNode Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<form id="myForm"><br />
<input id="myButton" type="button" value="Show parent node" onclick="function1();"><br />
</form><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = document.all.myButton.parentNode.id;<br />
alert("Parent node: <form>, id = "+"""+m+"""); <br />
} <br />
</script><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button Redirect==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><head><title>Button Redirect</title><br />
<script language="javascript"><br />
<!--<br />
function NewPage() {<br />
document.location.href= "http://www.wbex.ru"<br />
}<br />
//--><br />
</script><br />
<body><br />
<input type="button" value="Link" onClick="NewPage()"><br />
</body></html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button set Textfield value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<form name="quiz"><br />
<input type="text" value="" name="sky"><br />
<input type="hidden" value="blue" name="blue"><br />
<input type="button" value="See Answer" onClick="document.quiz.sky.value=(document.quiz.blue.value)"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button "sourceIndex" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<button onclick="alert(this.sourceIndex)">Source Index</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button"s value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<form id="myForm"><br />
<table><br />
<tr><br />
<td><br />
<input id="myButton" <br />
type="button" <br />
onClick="alert("This element value is:\n"+this.value);"><br />
</td><br />
<td><br />
<input id="myReset" <br />
type="reset" <br />
onClick="alert("This element value is:\n"+this.value);"><br />
</td><br />
<td><br />
<input id="mySubmit" <br />
type="submit" <br />
onClick="alert("This element value is:\n"+this.value);"><br />
</td><br />
</tr><br />
</table><br />
</form><br />
<script language="JavaScript"><br />
document.getElementById("myButton").value = "input type = "button"";<br />
document.getElementById("myReset").value="input type = "reset"";<br />
document.getElementById("mySubmit").value="input type = "submit"";<br />
</script><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button timeout==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Alarm Call Script</title><br />
<script language="JavaScript"><br />
<!--<br />
var alarmId;<br />
function alarmFunc() {<br />
alert("ALARM CALL!");<br />
}<br />
function startTimeout(id) {<br />
var minutes = prompt("How many minutes?", 0);<br />
alarmId = setTimeout("alarmFunc()", minutes*60000);<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type=button value="Start" onClick="startTimeout()"><br />
<input type=button value="Cancel" onClick="clearTimeout(alarmId)"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button to display the name of the form==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<body><br />
<form name="myForm"><br />
The form"s name is: <input type="text" name="text1" size="20"><br />
<br><br />
<br><br />
<input type="button" value="Show the form"s name" <br />
onClick="this.form.text1.value=this.form.name"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Button to display the names of all the elements in a form==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function showFormElements(theForm){<br />
str="Form Elements: "<br />
for (i=0; i<theForm.length; i++)<br />
str+=" \n " + theForm.elements[i].name<br />
alert(str)<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
First name: <input type="text" name="fname" size="20"><br />
<br><br />
Last name: <input type="text" name="lname" size="20"><br />
<br><br />
<br><br />
<input type="button" name="button1" value="Display name of form elements"<br />
onClick="showFormElements(this.form)"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create a button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function show_alert(){<br />
alert("Hello World!")<br />
document.all("myButton").focus()<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type="button" value="Click me!" name="myButton" onClick="show_alert()" /><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Disable a Button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<button onclick="this.disabled="true"; alert(this.isDisabled);">Disable Me</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Form button on click event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
function yourMessage(quote)<br />
{<br />
alert(quote);<br />
}<br />
</script><br />
</head><br />
<body><br />
Click <input type="button" value="HERE" onClick="yourMessage("Hi!")"> A message!</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Form Button "type"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<input type="button" <br />
value="type = "button""<br />
onClick="alert("&quot;"+this.type+"&quot;");"><br />
<input type="reset" <br />
value="type = "reset""<br />
onClick="alert("&quot;"+this.type+"&quot;");"><br />
<input type="submit" <br />
value="type = "submit""<br />
onClick="alert("&quot;"+this.type+"&quot;");"><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get form from form control (Button)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1(form) {<br />
var elem = document.getElementById("myButton").form.id;<br />
alert(elem);<br />
return true; <br />
} <br />
</script><br />
<form id="myF"><br />
<input id="myButton" <br />
type="button" <br />
value="Get ID of this control"s form" onClick="function1(this.form);"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
== HTML Form with onClick Code==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<BODY><br />
<FORM> <br />
Enter Your Name: <INPUT TYPE=text NAME=userName VALUE="Name"> <br />
Enter Your Age: <INPUT TYPE=text NAME=userAge VALUE="12"><br />
<INPUT TYPE=button VALUE="Check Age" <br />
onClick="var status = (userAge.value >= 21) ? "an adult" : "a minor"; <br />
alert(userName.value + " is " + status + ".");"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==JavaScript Button action event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Using Properties</TITLE></HEAD><br />
<BODY><br />
<H1>Using Properties</H1><br />
<FORM><br />
<P><INPUT TYPE="BUTTON" NAME="red" VALUE="Red"<br />
ONCLICK="document.bgColor="red""></P><br />
<P><INPUT TYPE="BUTTON" NAME="white" VALUE="White"<br />
ONCLICK="document.bgColor="white""></P><br />
<P><INPUT TYPE="BUTTON" NAME="blue" VALUE="Blue"<br />
ONCLICK="document.bgColor="blue""></P><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Methods and Properties of the Button Object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
Method<br />
+-----------+----------+----------------------------------------------------+ <br />
blur() Removes focus from the button.<br />
+-----------+----------+----------------------------------------------------+ <br />
click() Invokes a click event for that button.<br />
+-----------+----------+----------------------------------------------------+ <br />
focus() Applies focus to a button.<br />
+-----------+----------+----------------------------------------------------+ <br />
handleEvent()Passes an event to the appropriate event handler <br />
associated with a button. <br />
+-----------+----------+----------------------------------------------------+ <br />
Property<br />
+-----------+----------+----------------------------------------------------+ <br />
form Returns the Form object of which the button is a member.<br />
+-----------+----------+----------------------------------------------------+ <br />
name Returns the string that is specified in the name <br />
attribute of the HTML <input> tag.<br />
+-----------+----------+----------------------------------------------------+ <br />
type Returns the string specified in the type <br />
attribute of the HTML <input> tag. This string is <br />
always button for the Button object.<br />
+-----------+----------+----------------------------------------------------+ <br />
value Returns the string that appears in the graphical <br />
representation of a button.<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Open a new window with button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script><br />
function startGame(){<br />
var stadium = window.open("http://www.wbex.ru", "asdf", "height=450,width=300");<br />
stadium.focus();<br />
} <br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type = "button" value = "start game" onClick = "startGame()"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Putting Script Directly in the onclick Event Handler==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Page with Pushbutton</title><br />
</head><br />
<body><br />
<form><br />
<input type="SUBMIT" name="BUTTON1" value="PUSH" onclick="alert("pushed")"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
== Roll over one of our images.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>JavaScript Unleashed</title><br />
<script type="text/javascript" language="JavaScript1.2"><br />
<!--<br />
var overImg = new Array();<br />
overImg[0] = new Image(24,24);<br />
overImg[1] = new Image(24,24);<br />
<br />
var defaultImg = new Array();<br />
defaultImg[0] = new Image(24,24);<br />
defaultImg[1] = new Image(24,24);<br />
<br />
overImg[0].src = "http://www.wbex.ru/style/logo.png";<br />
overImg[1].src = "http://www.wbex.ru/style/logoRed.png";<br />
<br />
defaultImg[0].src = "http://www.wbex.ru/style/logo.png";<br />
defaultImg[1].src = "http://www.wbex.ru/style/logoRed.png";<br />
<br />
function rollImage(img,type){<br />
switch(type){<br />
case "over":<br />
document.images[img].src = overImg[img].src;<br />
break;<br />
case "out":<br />
document.images[img].src = defaultImg[img].src;<br />
break;<br />
}<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td align="center"><br />
<a href="javascript:void(0)"<br />
onmouseout="rollImage("0","out")"<br />
onmouseover="rollImage("0","over")"><br />
<img border="0" src="back.gif" width="24" height="24" alt="Back"><br />
</a> </td><br />
<td align="center"><br />
<a href="javascript:void(0)"<br />
onmouseout="rollImage("1","out")"<br />
onmouseover="rollImage("1","over")"><br />
<img border="0" src="forward.gif" width="24" height="24"<br />
alt="Forward"></a><br />
</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
== Running a Script from User Action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>An onClick script</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
function alertUser() {<br />
alert("Ouch!")<br />
}<br />
// --><br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
Here is some body text.<br />
<FORM><br />
<INPUT TYPE="text" NAME="entry"><br />
<INPUT TYPE="button" NAME="oneButton" VALUE="Press Me!" onClick="alertUser()"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Three Buttons Sharing One Function==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Button Click</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function displayTeam(btn) {<br />
if (btn.value == "A") {alert("A")}<br />
if (btn.value == "R") {alert("R")}<br />
if (btn.value == "M") {alert("M")}<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
Click on your favorite half of a popular comedy team:<P><br />
<FORM><br />
<INPUT TYPE="button" VALUE="A" onClick="displayTeam(this)"><br />
<INPUT TYPE="button" VALUE="R" onClick="displayTeam(this)"><br />
<INPUT TYPE="button" VALUE="M" onClick="displayTeam(this)"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Toggle button with hand cursor and image==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
Examples From<br />
JavaScript: The Definitive Guide, Fourth Edition<br />
Legal matters: these files were created by David Flanagan, and are<br />
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and<br />
distribute them for any purpose. Please note that these examples are<br />
provided "as-is" and come with no warranty of any kind.<br />
David Flanagan<br />
*/<br />
<html><br />
<script language="JavaScript1.1"><br />
// This is the constructor function for our new ToggleButton class.<br />
// Calling it creates a ToggleButton object and outputs the required<br />
// <a> and <img> tags into the specified document at the current location. <br />
// Therefore, don"t call it for the current document from an event handler.<br />
// Arguments:<br />
// document: The Document object the buttons are be created in.<br />
// checked: A boolean that says whether the button is initially checked.<br />
// label: An optional string that specifies text to appear after the button.<br />
// onclick: An optional function to be called when the toggle button is<br />
// clicked. It is passed a boolean indicating the new<br />
// state of the button. You can also pass a string, which is<br />
// be converted to a function that is passed a boolean argument<br />
// named "state".<br />
function ToggleButton(document, checked, label, onclick)<br />
{<br />
// The first time we are called (and only the first time), we have<br />
// to do some special stuff. First, now that the prototype object<br />
// is created, we can set up our methods. <br />
// Second, we need to load the images we"ll be using.<br />
// Doing this gets the images in the cache for when we need them.<br />
if (!ToggleButton.prototype.over) {<br />
// Initialize the prototype object to create our methods.<br />
ToggleButton.prototype.over = _ToggleButton_over;<br />
ToggleButton.prototype.out = _ToggleButton_out;<br />
ToggleButton.prototype.click = _ToggleButton_click;<br />
// Now create an array of image objects, and assign URLs to them.<br />
// The URLs of the images are configurable and are stored in an<br />
// array property of the constructor function itself. They are<br />
// initialized below. Because of a bug in Netscape, we"ve got<br />
// to maintain references to these images, so we store the array<br />
// in a property of the constructor rather than using a local variable.<br />
ToggleButton.images = new Array(4);<br />
for(var i = 0; i < 4; i++) {<br />
ToggleButton.images[i] = new Image(ToggleButton.width,<br />
ToggleButton.height);<br />
ToggleButton.images[i].src = ToggleButton.imagenames[i];<br />
}<br />
}<br />
<br />
// Save some of the arguments we were passed.<br />
this.document = document;<br />
this.checked = checked;<br />
// Remember that the mouse is not currently on top of us.<br />
this.highlighted = false;<br />
// Save the onclick argument to be called when the button is clicked.<br />
// If it is not already a function, attempt to convert it<br />
// to a function that is passed a single argument, named state.<br />
this.onclick = onclick;<br />
if (typeof this.onclick == "string")<br />
this.onclick = new Function("state", this.onclick);<br />
// Figure out what entry in the document.images[] array the images<br />
// for this checkbox will be stored at.<br />
var index = document.images.length;<br />
// Now output the HTML code for this checkbox. Use <a> and <img> tags.<br />
// The event handlers we output here are confusing but crucial to the<br />
// operation of this class. The "_tb" property is defined below, as<br />
// are the over(), out(), and click() methods.<br />
document.write("&nbsp;<a href="about:blank" " +<br />
"onmouseover="document.images[" + index + "]._tb.over();return true;" "+<br />
"onmouseout="document.images[" + index + "]._tb.out()" "+<br />
"onclick="document.images[" + index + "]._tb.click(); return false;">");<br />
document.write("<img src="" + ToggleButton.imagenames[this.checked+0] +"""+<br />
" width=" + ToggleButton.width +<br />
" height=" + ToggleButton.height +<br />
" border="0" hspace="0" vspace="0" align="absmiddle">");<br />
if (label) document.write(label);<br />
document.write("</a></br>");<br />
// Now that we"ve output the <img> tag, save a reference to the<br />
// Image object that it created in the ToggleButton object.<br />
this.image = document.images[index];<br />
// And also make a link in the other direction, from the Image object<br />
// to this ToggleButton object. Do this by defining a "_tb" property<br />
// in the Image object.<br />
this.image._tb = this;<br />
}<br />
// This becomes the over() method.<br />
function _ToggleButton_over()<br />
{<br />
// Change the image, and remember that we"re highlighted.<br />
this.image.src = ToggleButton.imagenames[this.checked + 2];<br />
this.highlighted = true;<br />
}<br />
// This becomes the out() method.<br />
function _ToggleButton_out()<br />
{<br />
// Change the image, and remember that we"re not highlighted.<br />
this.image.src = ToggleButton.imagenames[this.checked + 0];<br />
this.highlighted = false;<br />
}<br />
// This becomes the click() method.<br />
function _ToggleButton_click()<br />
{<br />
// Toggle the state of the button, change the image, and call the<br />
// onclick method, if it was specified for this ToggleButton.<br />
this.checked = !this.checked;<br />
this.image.src = ToggleButton.imagenames[this.checked+this.highlighted*2];<br />
if (this.onclick) this.onclick(this.checked);<br />
}<br />
// Initialize static class properties that describe the checkbox images. These<br />
// are just defaults. Programs can override them by assigning new values.<br />
// But they should only be overridden *before* any ToggleButtons are created.<br />
ToggleButton.imagenames = new Array(4); // Create an array.<br />
ToggleButton.imagenames[0] = "images/button0.gif"; // The unchecked box<br />
ToggleButton.imagenames[1] = "images/button1.gif"; // The box with a check mark<br />
ToggleButton.imagenames[2] = "images/button2.gif"; // Unchecked but highlighted<br />
ToggleButton.imagenames[3] = "images/button3.gif"; // Checked and highlighted<br />
ToggleButton.width = ToggleButton.height = 25; // Size of all images<br />
</SCRIPT><br />
<!-- Here"s how we might use the ToggleButton class. --><br />
Optional extras:<br><br />
<script language="JavaScript1.1"><br />
// Create ToggleButton objects and output the HTML that implements them.<br />
// One button has no click handler, one has a function, and one has a string.<br />
var tb1 = new ToggleButton(document, true, "56K Modem");<br />
var tb2 = new ToggleButton(document, false, "Laser Printer",<br />
function(clicked) {alert("printer: " + clicked);});<br />
var tb3 = new ToggleButton(document, false, "Tape Backup Unit",<br />
"alert("Tape backup: " + state)");<br />
</script><br />
<!-- Here"s how we can use the ToggleButton objects from event handlers. --><br />
<form><br />
<input type="button" value="Report Button States"<br />
onclick="alert(tb1.checked + "\n" + tb2.checked + "\n" + tb3.checked)"><br />
<input type="button" value="Reset Buttons"<br />
onclick="if (tb1.checked) tb1.click();<br />
if (tb2.checked) tb2.click();<br />
if (tb3.checked) tb3.click();"><br />
</form><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Using the onSubmit Event to Cancel a Form Submission (Internet Explorer)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>On Close</TITLE><br />
<SCRIPT> <br />
function checkForm(e) { <br />
if (!(window.confirm("Do you want to submit the form?"))) <br />
e.returnValue = false; <br />
} <br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM name="theForm" action="0801.html" <br />
onSubmit = "return checkForm(event)"><br />
<INPUT type=submit><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source></div>
Admin