Input-Felder mit Bildertausch

[pepepy]

Hallo,

in einem Formular habe ich mehrere Textfelder mit Hintergrundbild. Funktioniert ganz gut.
Bei Klick sollen die Bilder getauscht werden.
Ich habe einen Code gefunden, mit dem es funktioniert. Doch nur mit einem Feld.
Wie kann ich das auf mehrere Textfelder
<input id="name" type="text" name="Name" value="Name" onfocus="setFocus();" onblur="setBack()"/>
<input id="plz" type="text" name="PLZ" value="PLZ" onfocus="setFocus();" onblur="setBack()"/>... ausbauen?

function setFocus() {
		var element = document.getElementById("name");
		element.style.background = 'url(css/img/input-focus_01.png) no-repeat';
		element.value = "";
}

function setBack() {
		var element = document.getElementById("name");
		element.style.background = 'url(css/img/input_01.png) no-repeat';
		element.value = "Name";
}

Viele Grüße

 

[pepepy]

Das fuktioniert ja prima ohne JS. ))

input[type=text]:focus {
background: transparent url(/inc/img/input-focus.png) no-repeat;
color: #fff;
}
textarea:focus {
background: transparent url(/inc/img/textarea-focus.png) no-repeat;
}

Wenn das auch bei IE funktioniert, wäre ja super.

 

[grafagoggel]

Hallo,

in einem Formular habe ich mehrere Textfelder mit Hintergrundbild. Funktioniert ganz gut.
Bei Klick sollen die Bilder getauscht werden.
Ich habe einen Code gefunden, mit dem es funktioniert. Doch nur mit einem Feld.
Wie kann ich das auf mehrere Textfelder
<input id="name" type="text" name="Name" value="Name" onfocus="setFocus();" onblur="setBack()"/>
<input id="plz" type="text" name="PLZ" value="PLZ" onfocus="setFocus();" onblur="setBack()"/>... ausbauen?

function setFocus() {
		var element = document.getElementById("name");
		element.style.background = 'url(css/img/input-focus_01.png) no-repeat';
		element.value = "";
}

function setBack() {
		var element = document.getElementById("name");
		element.style.background = 'url(css/img/input_01.png) no-repeat';
		element.value = "Name";
}

Viele Grüße

Ersetze hier einfach

document.getElementById("name")

durch

document.getElementsByTagName("input")

Das fuktioniert ja prima ohne JS. ))

input[type=text]:focus {
background: transparent url(/inc/img/input-focus.png) no-repeat;
color: #fff;
}
textarea:focus {
background: transparent url(/inc/img/textarea-focus.png) no-repeat;
}

Wenn das auch bei IE funktioniert, wäre ja super.

Das was du hier hast ist auch Javascript. Es nutzt nur eine Bibliothek Namens jQuery, die einem einiges vereinfacht.

Wobei du hierfür die jQuery bibliothek einbinden musst.

Kannst du uns noch einen Link geben wo wir uns das ganze anschauen können?

 

[pepepy]

Vielen Dank!
Und viele Grüße