Formatting Buttons

The submit button used on this form is different from the standard-issue buttons. It is sized and colored differently, and it changes color when the mouse is moved over it.


The initial look for the button is given through a stylesheet specification. A stylesheet class is defined to set the button width, text alignment, font face and size, background color, and text color:

.buttonS {
width:35px;
text-align:center;
font-family:arial;
font-size:9pt;
background-color:seagreen;
color:white;
}

These settings are applied, then, by coding a CLASS attribute assigning this class name within the button tag:



Changes in the style specifications take place when the mouse is moved over the button and when removed from the button. These changes are activated by JavaScript statements coded within the button tag:

onMouseOver="OverMouse(this)" onMouseOut="OutMouse(this)">

The onMouseOver and onMouseOut events trigger function calls to OverMouse() and OutMouse(), respectively, passing a self reference to the object (this button) containing these event handlers. The functions, then, receive a reference to this submit button for script application.

The purpose in coding scripts within functions is two-fold. First, the scripts contain multiple statements that make it awkward to code inside individual buttons. Second, the functions can be called from any buttons to which the effects should apply. This latter point means, then, that the functions need to be made available to all pages for use by any buttons on those pages.

As is done for the header and menu that appear on all pages, the JavaScript code to activate buttons appears in an INCLUDE file that can be imported into any page. The normal method of importing JavaScript code is to include it in the HEAD> section of the page so that the routines are loaded and available for activation prior to the loading of the BODY> section. So, all pages of the eCommerce site include the directive,

require(jscript.inc)

within their HEAD> sections. The code that comprises the jscript.inc file is shown below:

jscript.inc



Recall that both functions receive a reference to the button that was clicked. This reference is received as variable button, so any reference to button is a reference to an actual button which currently has a mouse poised over it or which had a mouse just removed from over it. The two functions simply set different styles for the button depending on which action the user has taken.

--------------------------------------------


Related :

TransferringFiles
UsingCrystalReports6
VerifyUserEmailAddressPHP-1
VerifyUserEmailAddressPHP-2
viewinformationvb2005
WatermarkImagesFlyPHP-1
WatermarkImagesFlyPHP-2
WhatAretheIssues
What-isMySQL
WhatSQLServerExpress
writefileinvb2005
WritingFileDialogBox