PDA

View Full Version : 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


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>

vwphillips
12-17-2011, 11:14 AM
<!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?


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