Hi,
Also ich hab folgendes Problem:
Ich hab ein so ein nettes Input Feld auf meiner Page. Es hat eine Klasse mit einem Hintergrundbild wenn die Seite geladen wird.
Mit einem onFocus ändert sich dabei der ClassName damit es ein wenig dynamisch wirkt und das Hintergrundbild verschwindet, damit man den Text gut lesen kann.
Mit OnBlur wird eine javascript Funktion aufgerufen, die nachguckt ob in dem Feld nun was drin steht oder nicht. Wenn ja, dann ändert es nur die Klasse, wenn nein fügt es wieder das Hintergrundbild ein und ändert die Klasse.
Hier mal ein wenig Code:
Mein Textfeld:
Dann das Javascript:
Die css noch, damit ihr euch das besser vorstellen könnt. Auch wenn sie nicht von Bedeutung sind:
Danke schonmal im Voraus wenn mir irgendjemand helfen kann. Es is ja eigentlich ein nicht allzu großes Problem, das hab ich mir zumindest am Anfang gedacht ...
Also ich hab folgendes Problem:
Ich hab ein so ein nettes Input Feld auf meiner Page. Es hat eine Klasse mit einem Hintergrundbild wenn die Seite geladen wird.
Mit einem onFocus ändert sich dabei der ClassName damit es ein wenig dynamisch wirkt und das Hintergrundbild verschwindet, damit man den Text gut lesen kann.
Mit OnBlur wird eine javascript Funktion aufgerufen, die nachguckt ob in dem Feld nun was drin steht oder nicht. Wenn ja, dann ändert es nur die Klasse, wenn nein fügt es wieder das Hintergrundbild ein und ändert die Klasse.
Hier mal ein wenig Code:
Mein Textfeld:
Code:
.... html
<input type="text" id="username" name="username" class="form_username" value=""
size="15" OnFocus="this.className='form_on'" OnBlur="javascript:flush_input(username)">
....html
Dann das Javascript:
Code:
function flush_input(id){
if (document.getElementById(id).value != '') {
document.getElementById(id).style.backgroundImage = '';
document.getElementById(id).className = 'form_off';
}else {
document.getElementById(id).style.backgroundImage = 'url(img/' + id + '.jpg)';
document.getElementById(id).className = 'form_'+id;
}
}
Die css noch, damit ihr euch das besser vorstellen könnt. Auch wenn sie nicht von Bedeutung sind:
Code:
.form_on {
font-size: 8pt;
font-family: Verdana;
color: #656363;
background-color: #C5C5C5;
border: 1px solid #939394;
cursor:default;
}
.form_off {
font-size: 8pt;
font-family: Verdana;
color: #656363;
background-color: #8E8E8E;
border: 1px solid #939394;
cursor:default;
}
.form_username {
font-size: 8pt;
font-family: Verdana;
color: #656363;
background-image:url('img/form_username.gif');
background-repeat: no-repeat;
border: 1px solid #939394;
cursor:default;
}
Danke schonmal im Voraus wenn mir irgendjemand helfen kann. Es is ja eigentlich ein nicht allzu großes Problem, das hab ich mir zumindest am Anfang gedacht ...