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

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

Light Poster

41 posts since Jan 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Show Comments

1

<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

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

3 Years Ago

0

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

Light Poster

41 posts since Jan 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Show Comments

1

lines 14 and 19 have a typo

yDiv.style.backgroungImage

should be

yDiv.style.backgroundImage

scrager

Newbie Poster

10 posts since Feb 2009

Reputation Points: 12

Solved Threads: 2

3 Years Ago

0

Hello,

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>
																</div>
															</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
Arvind

arvindikchari

Light Poster

41 posts since Jan 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

yes u need id.

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

3 Years Ago

0

Hello

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>
																	<img alt="" src="images/spacer.gif" width="1" height="12">
																	<select class="sel1"><option>&nbsp; Sony</option></select>
																</div>
															</div>
														</div>
													</div>

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,
Arvind

arvindikchari

Light Poster

41 posts since Jan 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

There is no HTML element with 's_bkbgiu' id.

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

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

This article has been dead for over three months