|
|
change background image of an input field
There are many web sites that use this small but powerful chunk of functionality. The Internet is based on look and feel, so it is obviously very common to have to work with a large amount of display options. The easiest to understand is simply changing the background image used in a text input field.
We use a pre-loader to fetch the image data that is going to be displayed. The src attribute of the document object is used to tell the browser the location of the file. Upon the page loading, the data for the image is fetched and stored and is immediately available to the entire page. It should be noted that if you wish to switch the displayed image back to the original image, you would have to use another src attribute statement to fetch the original image data and store it. You may then provide to have the image switched back according to your requirements.
<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 an input field</p>
<p>Mouse over these images and the input field 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="text" value="Mouse over the images" size="20">
</form>
</body>
</html>
Use a simple id attribute to uniquely identify the page element to apply the change to. This id is used as the argument of the getElementById object. We then use a style.background attribute to select from the many style sheet options available and apply the new value when the onMouseOver event is triggered. You may use a relative or absolute URL for the location of the image file and the image format can be any that the browser supports, in this case a .jpg.
|
|
