Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 1949

Feb 22nd, 2009

Specifying the bg & hover images of a div using the value supplied in a text box

Expand Post »

Hello

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

Regards
Arvind

arvindikchari

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

41 posts
since Jan 2009

Permalink

Feb 22nd, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

javascript Syntax (Toggle Plain Text)
<html>
	<head>
		<title>test</title>
		<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() {
					alert(hoverText);
					myDiv.style.backgroungImage = "url(" + hoverText + ")";
				}
 
				myDiv.onmouseout = function() {
					alert(bgText);
					myDiv.style.backgroungImage = "url(" + bgText + ")";
				}
			}
		</script>
 
		<style>
			#mydiv {
				border: 1px solid black;
				width: 100px;
				height: 100px;
			}
		</style>		
	</head>
 
	<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"/>
	</body>
</html>
<html>
	<head>
		<title>test</title>
		<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() {
					alert(hoverText);
					myDiv.style.backgroungImage = "url(" + hoverText + ")";
				}
				
				myDiv.onmouseout = function() {
					alert(bgText);
					myDiv.style.backgroungImage = "url(" + bgText + ")";
				}
			}
		</script>
		
		<style>
			#mydiv {
				border: 1px solid black;
				width: 100px;
				height: 100px;
			}
		</style>		
	</head>
	
	<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"/>
	</body>
</html>

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Feb 23rd, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

Hello

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

Regards
Arvind

arvindikchari

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

41 posts
since Jan 2009

Permalink

Feb 23rd, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

lines 14 and 19 have a typo

yDiv.style.backgroungImage

should be

yDiv.style.backgroundImage

scrager

Reputation Points: 12

Solved Threads: 2

Newbie Poster

Offline

10 posts
since Feb 2009

Permalink

Mar 23rd, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

Hello,

I have a div with the following code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
																</div>
															</div>
<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>
																</div>
															</div>

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
.m3_dr { background:url(images/m3-dr.gif) repeat-x top #FFBF00;}
.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
Arvind

arvindikchari

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

41 posts
since Jan 2009

Permalink

Mar 23rd, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

yes u need id.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

Mar 25th, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

Hello

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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 + ")";
 
}
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
																</div>
															</div>
														</div>
													</div>
<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>
																</div>
															</div>
														</div>
													</div>

Finally the CSS code is given below:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
.m1_t { background:url(images/m1-t.jpg) no-repeat top;}
.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,
Arvind

arvindikchari

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

41 posts
since Jan 2009

Permalink

Mar 25th, 2009

Re: Specifying the bg & hover images of a div using the value supplied in a text box

There is no HTML element with 's_bkbgiu' id.

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Disappearing List Bug

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: window not resizing?

DaniWeb Message

Cancel Changes

User Name
Password