JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

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

 
0
  #1
Feb 22nd, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

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

 
1
  #2
Feb 22nd, 2009
javascript Syntax (Toggle Plain Text) 
  1. <html>
  2. 	<head>
  3. 		<title>test</title>
  4. 		<script type="text/javascript">
  5.  
  6. 			function applyStyle() {
  7. 				var bgText = document.getElementById('bg').value;
  8. 				var hoverText = document.getElementById('hover').value;
  9. 				var myDiv = document.getElementById('mydiv');
  10.  
  11. 				myDiv.style.backgroungImage = "url(" + bgText + ")";
  12. 				myDiv.onmouseover = function() {
  13. 					alert(hoverText);
  14. 					myDiv.style.backgroungImage = "url(" + hoverText + ")";
  15. 				}
  16.  
  17. 				myDiv.onmouseout = function() {
  18. 					alert(bgText);
  19. 					myDiv.style.backgroungImage = "url(" + bgText + ")";
  20. 				}
  21. 			}
  22. 		</script>
  23.  
  24. 		<style>
  25. 			#mydiv {
  26. 				border: 1px solid black;
  27. 				width: 100px;
  28. 				height: 100px;
  29. 			}
  30. 		</style>		
  31. 	</head>
  32.  
  33. 	<body >
  34. 		<label>BG:</label><input id="bg" type="text"/> 
  35. 		<label>Hover:</label><input id="hover" type="text"/>
  36. 		<input type="button" onClick="applyStyle()" value="apply">
  37. 		<div id="mydiv"/>
  38. 	</body>
  39. </html>
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

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

 
0
  #3
Feb 23rd, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 10
Reputation: scrager is an unknown quantity at this point 
Solved Threads: 2
scrager scrager is offline Offline
Newbie Poster

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

 
1
  #4
Feb 23rd, 2009
lines 14 and 19 have a typo

yDiv.style.backgroungImage

should be

yDiv.style.backgroundImage
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

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

 
0
  #5
Mar 23rd, 2009
Hello,

I have a div with the following code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div class="dr">
  2. 																<div class="dc m_r m_pad" >
  3. 																	<div class="m3_dr m3_pad"><span class="m3_h_text">featured products</span></div>
  4. 																</div>
  5. 															</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) 
  1. .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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

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

 
0
  #6
Mar 23rd, 2009
yes u need id.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

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

 
0
  #7
Mar 25th, 2009
Hello

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function applystyle_mandiv() {
  2.  
  3. var bgText = document.getElementById('s_bkbgiu').value;
  4.  
  5.  
  6.  
  7. var myDiv = document.getElementById('mandiv');
  8.  
  9.  
  10.  
  11. myDiv.style.backgroundImage = "url(" + bgText + ")";
  12.  
  13.  
  14.  var manName = document.getElementById("in_manImage");
  15.       manName.value = "url(" + bgText + ")";
  16.  
  17.  
  18.  
  19. }

The HTML code is as below:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div id="mandiv" class="dc m1_t" >
  2. 														<div class="dt m1_b" >
  3. 															<div class="dr">
  4. 																<div  class="dc m1_pad" >
  5. 																	<span class="m1_h_text">Manufacturers:</span><br>
  6. 																	<img alt="" src="images/spacer.gif" width="1" height="12"><br>
  7. 																	<select class="sel1"><option>&nbsp; Sony</option></select>
  8. 																</div>
  9. 															</div>
  10. 														</div>
  11. 													</div>

Finally the CSS code is given below:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. .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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz

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

 
0
  #8
Mar 25th, 2009
There is no HTML element with 's_bkbgiu' id.
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser captchaformproblem cart child close codes column css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post problem programming prototype redirect safari scale scriptlets scroll search security select software sql toggle unicode variables w3c web website window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC