change background image of div from textfield

[joshgarrod]

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

 

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

 

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

[Amit20]

First try with passing any color rather than using image! If that's working then u need to debug your code using web console or firebug!

[joe92]

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

You are searching for elements by TagName...

 

 

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

greenhighlight is a css ClassName...

 

Searching by tag name is used to search for tags, i.e. divs or span's etc. You need to search for your class name, so change the function to say 'getElementsByClassName' and that should sort it.

 

Hope this helps,

Joe