I have the following snippet in one of my html pages :
<div class="inputboximage">
<div class="value2">
<input name='address1' value='Somewhere' type="text" size="26" maxlength="40" />
<br />
</div>
</div>
My problem is that I need the inputboximage background to change when I click in the address1 text field and to revert to the original when it loses focus.
I have used the following :
<script>
$(document).ready(function(){
$("input").focus(function () {
$(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)');
});
$("input").blur(function () {
$(this.parentNode).css('background-image', 'url(images/curvedinput.gif)');
});
});
</script>
but instead of replacing the image, it seems to be adding a background image to the value2 div as you would expect. I can use parentNode.parentNode in this case, but there is also a chance that the inputboxImage node could be further up or down the parent tree.
Is there a way I can change this code so that it will navigate down the parent tree until it finds a div called inputboximage and replace the image there?
Also, if I have two different div classes, inputboximage and inputboximageLarge, is there a way to modify this function so that it will work with both, replacing the background image with a different image for each one?