Hello
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
Thanks
Arvind
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">
<head>
<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">
*{ }
</style>
<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.appendChild(ins);
}
/* ]]> */
</script>
<title>Demo</title>
</head>
<body>
<div id="output"></div>
<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>
</div>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.