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

Recommended Answers

All 7 Replies

<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>
commented: Gave the required solution to the problem +1

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

lines 14 and 19 have a typo

yDiv.style.backgroungImage

should be

yDiv.style.backgroundImage

commented: corrected an incorrect post +1

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

yes u need id.

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><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:

.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

There is no HTML element with 's_bkbgiu' id.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.