I want that the user should specify the full url to 2 images in 2 text boxes, and these images should be set as the hover image and background image respectively, for a div.

How will this be coded


		<script type="text/javascript">
			function applyStyle() {
				var bgText = document.getElementById('bg').value;
				var hoverText = document.getElementById('hover').value;
				var myDiv = document.getElementById('mydiv');
				myDiv.style.backgroungImage = "url(" + bgText + ")";
				myDiv.onmouseover = function() {
					myDiv.style.backgroungImage = "url(" + hoverText + ")";
				myDiv.onmouseout = function() {
					myDiv.style.backgroungImage = "url(" + bgText + ")";
			#mydiv {
				border: 1px solid black;
				width: 100px;
				height: 100px;
	<body >
		<label>BG:</label><input id="bg" type="text"/> 
		<label>Hover:</label><input id="hover" type="text"/>
		<input type="button" onClick="applyStyle()" value="apply">
		<div id="mydiv"/>
Gave the required solution to the problem


I created a page with the above code in it, but nothing happens, only alert messages are shown with the url value.



I have a div with the following code:

<div class="dr">
																<div class="dc m_r m_pad" >
																	<div class="m3_dr m3_pad"><span class="m3_h_text">featured products</span></div>

I want to change the bg image for the div ' m3_dr', the css for which is given below:

.m3_dr { background:url(images/m3-dr.gif) repeat-x top #FFBF00;}

But the above code is not working, do I have to assign an ID to the div, how should this be coded to make it work

Thanks and Regards


I added ID to the div, but nothing happens,the code is as below:

function applystyle_mandiv() {

var bgText = document.getElementById('s_bkbgiu').value;

var myDiv = document.getElementById('mandiv');

myDiv.style.backgroundImage = "url(" + bgText + ")";

 var manName = document.getElementById("in_manImage");
      manName.value = "url(" + bgText + ")";


The HTML code is as below:

<div id="mandiv" class="dc m1_t" >
														<div class="dt m1_b" >
															<div class="dr">
																<div  class="dc m1_pad" >
																	<span class="m1_h_text">Manufacturers:</span><br>
																	<img alt="" src="images/spacer.gif" width="1" height="12"><br>
																	<select class="sel1"><option>&nbsp; Sony</option></select>

Finally the CSS code is given below:

.m1_t { background:url(images/m1-t.jpg) no-repeat top;}

Can someone tell me if there is anything wrong with this code, and what changes are required to make it work

Thanks and Regards,

This article has been dead for over six months. Start a new discussion instead.