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
  • 216 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Luckychap

Dani AI

Generated

A short, practical fix and checklist that ties the posts together.

’s approach was fine conceptually; already caught the most common show‑stopper — the property name must be correct (backgroundImage). Other frequent problems in this thread: the target div was accidentally self‑closed (invalid HTML), an input id referenced in script didn’t exist (s_bkbgiu), and values were sometimes stored as the literal string url(...) instead of the raw URL. The simplest reliable pattern is: read the raw URL from an input, set element.style.backgroundImage = "url('...')" (quotes help if the path contains spaces), preload the hover image, and swap on mouseenter/mouseleave (or toggle a class).

Quick checklist to diagnose why a background change “does nothing”:

  • Confirm the element exists: call document.getElementById('theId') in the console.
  • Fix typos (JS will stop on an exception). Check the console for errors.
  • Ensure HTML is valid (use </div>, not <div/>).
  • Run the script after DOM is ready (place script at the end or use DOMContentLoaded).
  • Store plain URLs in inputs; only wrap with url('...') when assigning to CSS.
  • Preload the hover image to avoid flicker.

Example pattern (IDs chosen differently from the thread to avoid repeating posted code):

/* HTML: inputs with ids bgUrl, hoverUrl; button applyBtn; target div id box */
document.getElementById('applyBtn').addEventListener('click', function(){
  var bg = document.getElementById('bgUrl').value.trim();
  var hover = document.getElementById('hoverUrl').value.trim();
  var box = document.getElementById('box');
  if(!box){ console.error('target not found'); return; }
  if(bg) box.style.backgroundImage = "url('" + bg.replace(/'/g,"\\'") + "')";
  if(hover){ var p = new Image(); p.src = hover; } // preload
  box.addEventListener('mouseenter', function(){ if(hover) box.style.backgroundImage = "url('" + hover.replace(/'/g,"\\'") + "')"; });
  box.addEventListener('mouseleave', function(){ if(bg) box.style.backgroundImage = "url('" + bg.replace(/'/g,"\\'") + "')"; });
});

Final notes: setting backgroundImage changes only the image (keeps repeat/position/color from the class); setting background replaces all background properties. In ’s later snippet, avoid storing manName.value = "url(...)"; store the plain URL and build the url('...') string only when applying to the style.

Recommended Answers

All 7 Replies

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.