Member Avatar for arvindikchari

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

  • 3 Contributors
  • 7 Replies
  • 195 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Luckychap
Member Avatar for Luckychap 
<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
Member Avatar for arvindikchari

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

Member Avatar for scrager

lines 14 and 19 have a typo

yDiv.style.backgroungImage

should be

yDiv.style.backgroundImage

commented: corrected an incorrect post +1
Member Avatar for arvindikchari

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

Member Avatar for Luckychap

yes u need id.

Member Avatar for arvindikchari

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

Member Avatar for Luckychap

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.