I want that on the page visible to user, there is a text box, User can specify full path to an image in this text box, and once user clicks on apply button. then this image is set as the background image for a div

How should this be coded


This demo will only on work on IE6+, Opera7+ and ff3+

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css" id="internal">
*{ }
<script type="text/javascript">
/* <![CDATA[ */
function demo() {
var temp = '#output {\n';
temp += 'background: #eee url(' + document.getElementById('txt').value + ') repeat-x center center;\n';
temp += 'min-width: 5em;\n';
temp += 'min-height: 5em; }\n';

var div = document.getElementById('internal');
var ins = document.createTextNode(temp);
/* ]]> */

<div id="output"></div>

<!-- Valid path of your image must be applied on this field. Which will be set as the background-image of the box(#output); -->

<input type="text" id="txt" name="txt" value="" />
<button id="btn" name="btn" onclick="demo();">Apply</button>