|
|
|
insert background image to a button
Providing a background image as that to display as the submit button is always a good idea. The flat default gray colored button just isn’t very nice to look at. Use any size image for your button – the browser will automatically size the button accordingly. Keep it to a practical size, of course.
We use the style.background attribute to adjust the image to be used. The URL to the file may be given as absolute or relative and can be any image format the browser supports. An onMouseOver event is used to trigger the execution of the JavaScript function given in the HEAD of the document.
<html>
<head>
<script type="text/javascript">
function bgChange(bg) {
document.getElementById('x').style.background="url(" + bg + ")";
}
</script>
</head>
<body>
<p>This example demonstrates how to insert a background image to a button</p>
<p>Mouse over these images and the button will get a background image.</p>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td>
</tr>
</table>
<form>
<input id="x" type="button" value="Mouse over the images">
</form>
</body>
</html>
Adding a bit of customization can be fun. One idea for this is to change the image as the button is clicked. You would need to create a different JavaScript function within the HEAD of the document with the exact same directions, just change the file name. Use an onMouseDown event to change to the down image you’d like to use and an onMouseUp event to change the image back as the up image.
|
|
