change background image of div from textfield

**joshgarrod** · 12-16-2011, 09:18 PM

Hi, I am trying to get the background of a div to change when the user is typing in the textfield inside it... sadly I cannot get it to work. Could someone please help me solve this?

Thanks in advance...

Javascript

Code:

function changebg() {
var docEl = this.parentNode.getElementsByTagName('greenhighlight'); docEl.style.backgroundImage = "url('images/form-highlight-bg.jpg')";
}

css

.greenhighlight {float:left; width:980px; height:60px;}

html

Code:

<fieldset>
<div class="greenhighlight">
<span class="hint">The contact name is the name of the person who is to receive the enquiries for the adverts we submit. This field is required.</span>
<label for="contactname"><strong>* Contact Name:</strong></label>
<input type="text" id="contactname" onFocus="changebg(greenhighlight);"/>
</div>
</fieldset>

**vwphillips** · 12-17-2011, 11:14 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.greenhighlight {float:left; width:980px; height:60px;}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function changebg(ip) {
 ip.parentNode.style.backgroundImage = "url('http://www.vicsjavascripts.org.uk/StdImages/One.gif')";
}
/*]]>*/
</script>
</head>

<body>
<fieldset>
<div class="greenhighlight">
<span class="hint">The contact name is the name of the person who is to receive the enquiries for the adverts we submit. This field is required.</span>
<label for="contactname"><strong>* Contact Name:</strong></label>
<input type="text" id="contactname" onFocus="changebg(this);"/>
</div>
</fieldset>
</body>

</html>

**joshgarrod** · 12-18-2011, 05:57 PM

Hi, thanks very much for your reply. I tried your code in a fresh page and it worked great thanks. But when i put it into my page you need to refresh the page for the background to change? Why would this be? There is another small piece of Javascript that displays the span "hint" when click on the text field... Perhaps I could combine the two?

Code:

<script type="text/javascript">

// this part is for the form field hints to display
// only on the condition that the text input has focus.
// otherwise, it stays hidden.

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
addLoadEvent(prepareInputsForHints);

</script>

**vwphillips** · 12-19-2011, 10:53 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.greenhighlight {float:left; width:980px; height:60px;}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function changebg(ip,img,display) {
 ip.parentNode.style.backgroundImage = 'url('+img+')';
 ip.parentNode.getElementsByTagName('SPAN')[0].style.display = display;
}
/*]]>*/
</script>
</head>

<body>
<fieldset>
<div class="greenhighlight">
<span class="hint">The contact name is the name of the person who is to receive the enquiries for the adverts we submit. This field is required.</span>
<label for="contactname"><strong>* Contact Name:</strong></label>
<input type="text" id="contactname"
 onfocus="changebg(this,'http://www.vicsjavascripts.org.uk/StdImages/One.gif','inline');"
 onblur="changebg(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif','none');"
/>
</div>
</fieldset>
</body>

</html>

**joshgarrod** · 12-22-2011, 09:31 PM

thanks very much for your help, works just great

Thread: change background image of div from textfield

Thread Tools

Search Thread

change background image of div from textfield

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions