[TristateFormbuttons]



Querverweis

Ein Tutorial, welches die Funktionsweise dieses Scripts detailliert erklärt, finden Sie hier.

Mit diesem Script bringen Sie Farbe in die triste Welt der grauen Formular- Buttons.

[Code]

[zwischen <HEAD> und </HEAD>]
<style>
.TAS {background-color: #000044;
      color: #EFE7DF;
      border: 1 solid #6E6650;
      scrollbar-base-color: #FF8000;}
</style>

<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)

   // optional -- but it gets the lines off the image in IE
   self.focus()


   document.TheForm.FieldOne.value = ""
   document.TheForm.FieldTwo.value = ""
}
</script>

[IN den <BODY> Tag]

[zwischen <BODY> und </BODY>]
<form name="TheForm">
<textarea name="FieldOne" class="TAS" rows="4"  cols="42" wrap="virtual">
The form itself must be named; so must
the fields in the form.
The name of this form is "TheForm".
The name of this field is "FieldOne".
Yadda Yadda.
Yadda Yadda.
</textarea>
<br>
<textarea  name="FieldTwo" class="TAS" rows="4" cols="42" wrap="virtual">
A seconde sample textarea field with, of
course, still more sample stuff in it.
The Name of this field is "FieldTwo".
Yadda Yadda.
Yadda Yadda.
</textarea>
</form>
<br>

<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>

[Autor]

codelifter

[Download]

Kopieren Sie bitte den Code

Copyright © 1998- Nightfire Webworker Archiv Script No: 403