Ein Tutorial, welches die Funktionsweise dieses Scripts detailliert erklärt, finden Sie hier.
[Beschreibung]
Mit diesem Script bringen Sie Farbe in die triste Welt der grauen Formular- Buttons.
[Kompatibilität]
[Code]
<script>
var Pic = new Array
Pic[0] = 'reset_green.gif' Pic[1] = 'reset_orange.gif' Pic[2] = 'reset_red.gif' Pic[3] = 'submit_green.gif' Pic[4] = 'submit_orange.gif' Pic[5] = 'submit_red.gif'
var p = Pic.length var preLoad = new Array() var i = 0; for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] }
function switchImage(whichImage,imageNumber){ document.images[whichImage].src = preLoad[imageNumber].src }
function doSubmit(){
// message for the Submit alert box // note how \n is used for line formatting var S = "SUBMIT - look in the code, and replace this alert box \n"+ "with whatever action you wish to perform when the submit \n"+ "image 'button' is clicked.\n\n"+ "If you wish to call an html page, then you would use...\n\n"+ "window.location='http://www.address.com/page.html' \n\n"+ "If you wish to call a script, then use the address of the\n"+ "the script. Additional code would be required if you need\n"+ "to pass values from the form fields to the cgi script. \n"
// call the alert box alert(S)
// optional -- but it gets the lines off the image in IE self.focus()
// if you wanted to call an html page, this is where you would // do it, in the format of the following example line... // window.location='http://www.codebrain.com/java/index.html' }
function doReset(){
// message for the Reset alert box // note how \n is used for line formatting var R = "RESET - This is usually used to reset a form to a state \n"+ "where all the fields in the form are empty -- though in\n"+ "some cases, it can also be used to reset the form fields \n"+ "to certain preset values. \n\n"+ "In either case, you must *name* both the form itself and \n"+ "each of the fields in the form, so that the script can \n"+ "find them. \n\n"+ "In this case we'll just clear the fields. See the code for\n"+ "more on this."
// call the alert box alert(R)
document.TheForm.FieldOne.value = "" document.TheForm.FieldTwo.value = "" } </script>
<a href="javascript:doReset()" onMouseOut = "switchImage('resetImage',0)" onMouseOver = "switchImage('resetImage',1)" onMouseDown = "switchImage('resetImage',2)"> <img name="resetImage" src="reset_green.gif" width="83" height="30" border="0"> </a> <a href="javascript:doSubmit()" onMouseOut = "switchImage('submitImage',3)" onMouseOver = "switchImage('submitImage',4)" onMouseDown = "switchImage('submitImage',5)"> <img name="submitImage" src="submit_green.gif" width="83" height="30" border="0"> </a>
codelifter
Kopieren Sie bitte den Code