|
|
insert a background image into a textarea
Inserting a background image into your textarea is an effective way to brand your site with a unique look and feel. Use any image format supported by the browser. The style.background=url attribute is used to give the location of the file and may be an absolute or relative URL.
The style.background attribute acts like the background=url attribute you might use with the BODY tag. The image is displayed at its actual size and any overlapping areas aren’t shown if the textarea is smaller than the image. If the textarea element is larger than the image, it will be repeated (tiled).
<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 textarea</p>
<p>Mouse over these images and the textarea 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>
<textarea id="x" rows="5" cols="20"></textarea>
</form>
</body>
</html>
I’ve seen a few sites that use the background image as an informative indicator to the user. It is entirely possible to count the number of characters being typed in the textarea and change the image that is displayed according to these counted values. A progress bar can be displayed as the background image as the user types, giving them the idea of how much more characters they have to add if you’ve specified a minimum or the amount of characters they have left if you’ve specified a maximum.
|
|
