✔ Hintergrundfarbe im Kontaktformular dynamisch ändern

F

Foo0815

Grünschnabel
Hallo,

Ich möchte gerne ein Kontaktformular schreiben, in dem sich die Hintergrundfarbe der Eingabezeile dynamisch ändert.

Ich habe probiert und viel gelesen. Ich bin aber nicht über diesen Ansatz hinaus gekommen:

PHP: 
<script language="JavaScript">
		function hintergrund (zelle,farbe)
			{
			 document.getElementById(zelle).bgColor = farbe;
			}
</script>

...

PHP: 
echo ('	
				<div id="z1" style ="position:absolute;left:0px;top:400px;height:20px;width:400px;background-color:#CCCCCC;border:1 px solid black;" onMouseOver="hintergrund (\'z1\',\'#C0C0C0\')"  onMouseOut="hintergrund (\'z1\',\'#FFFFFF\')">
				Test
				</div>
');

Hat jemand vielleicht eine Idee, warum das so in dieser Form nicht funktioniert ?

Vielen, vielen Dank im Voraus...

Schöne Grüße

Stephan
 
Nachtrag...

bzw. :
PHP: 
<style type="text/css">
	.Eingabefeld { border: 1px solid black; color: black; background: white}
-->
</style>

[....]


<table>
		<tr> 
				<td>Vorname</td> 
				<td><input class = "Eingabefeld" id = "z1" type="text" size=75 name="s3" "onMouseOver="hintergrund (\'z1\',\'#C0C0C0\')"  onMouseOut="hintergrund (\'z1\',\'#FFFFFF\')">></td> 
			</tr>

</table>
 
Hi!

Bitte nicht schlagen, wenn es Blödsinn oder unelegant ist! ;)
HTML: 
<html>
<head>
<title>test</title>

<style type="text/css">
    .Eingabefeld { border: 1px solid black; color: black; background: white}
</style>
<script language="JavaScript">
    function hintergrund(zelle,farbe)
    {
        document.getElementById(zelle).style.backgroundColor = farbe;
        return true;
    }
</script>  
</head>

<body>
<table>
    <tr> 
        <td>Vorname</td> 
        <td><input class="Eingabefeld" id="z1" type="text" size=75 name="s3" onMouseOver="return hintergrund('z1','#C0C0C0');" onMouseOut="return hintergrund('z1','#FFFFFF')"></td>
    </tr>
</table>
</body>
</html>
-> document.getElementById(zelle).style.backgroundColor :)

Liebe Grüße,
Mark.

//edit: eventuell ist folgendes ein schönere Alternative?!
HTML: 
<html>
<head>
<title>test</title>

<style type="text/css">
    .Eingabefeld { border: 1px solid black; color: black; background: white; }
    .Eingabefeld.over { border: 1px solid black; color: black; background: red; }
</style>
</head>

<body>
<table>
    <tr> 
        <td>Vorname</td> 
        <td><input class="Eingabefeld" id="z1" type="text" size=75 name="s3"
			onMouseOver="this.className='Eingabefeld over';"
			onMouseOut="this.className='Eingabefeld';"></td>
    </tr>
</table>
</body>
</html>
 
Hallo,

im Firefox 3.0 funktioniert dein Ansatz prima.
Gibt es denn auch ein Workaround für den IE ?
Das sieht da ziemlich wirr aus.

Vielen Dank,

Stephan
 
Hi,

beide Vorschläge von Mark funktionieren bei mir im IE tadellos, und eine diskrepante (wirre) Darstellung gegenüber den anderen Browsern kann ich in ihm auch nicht erkennen.

mfg Maik
 
Hallo Maik,

ja, es war wohl mein Fehler.
Ich habe in meinen Stylesheets da wohl die tags doppelt definiert beim Importieren.
Dies hatte wohl augenscheinlich zur Folge, dass der IE die Größe der Eingabefelder nicht bestimmen konnte.

:) Jetzt funktioniert es aber auch im IE.

Vielen Dank für deine schnelle und unkomplizierte Antwort.

Gruß,

Stephan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück