|
|
select background color of the submit button
Internet pages are a visual medium and being such should look as good as possible. The default gray color of a submit button sometimes just will not do, so you’re now able to change this color to any within the normal palette of millions of colors. You can specify a permanent color within CSS rules in the HEAD of the document, change them dynamically or according to user input.
You may use any coloring method such as named colors, hex colors or RGB colors. We use the style.color attribute to apply the color change and call it with an onMouseOver event. Notice that the color is given as a static named color. You may substitute this static value with a JavaScript variable or array index value. In this way the value (the color) may be decided upon by a different JavaScript function and applied exactly as it would be if you’re stating a static value.
<html>
<head>
<script type="text/javascript">
function changeColor(color) {
document.getElementById('x').style.background=color;
}
</script>
</head>
<body>
<p>This example demonstrates how to change the background color of a button.</p>
<p>Mouse over the three colored table cells, and the background color will change:</p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form>
<input id="x" type="button" value="Mouse over the colors">
</form>
</body>
</html>
Use an id attribute within the page element you’re committing the changes to. This should be reflected as the argument passed to the getElementById object. The new color is applied when the onMouseOver event is triggered.
|
|
