zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe für input / Hintergrundbild soll nach eingabe geändert bleiben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.10.2014, 02:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2014
Beiträge: 2
sedo befindet sich auf einem aufstrebenden Ast
Standard Hilfe für input / Hintergrundbild soll nach eingabe geändert bleiben

Hallo zusammen,

ich habe folgendes Problem. Ich habe ein Eingabefeld mit einem Bild als Hintergrund, sobald jemand anfängt bzw. schon Text eingegeben hat soll ein alternatives Bild im Eingabefeld angezeigt werden.

code aus der Seite:
<input type="text" name="nick" size="20" class="intxt1" />

code aus der CSS:
.intxt1{
font-size:26px;
position:absolute;
top:120px;
left:470px;
width:260px;
height:80px;
border:0px;
background-image:url('../bilder/1std.png');
}

.intxt1:focus{
font-size:26px;
position:absolute;
top:120px;
left:470px;
width:260px;
height:80px;
background-image:url('../bilder/1empty.png');
border: 2px solid #FFFFFF;
}
Mit :focus erziehl ich den Effekt den ich haben will allerdings bleibter er ja nicht bestehen, wenn ich mein target wechsle. Hab scho einiges probiert komme aber nicht zum Ergebniss kann mir vllt jemand weiterhelfen.

Vielen Dank

Gruß

sedo
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.10.2014, 10:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Was Du willst kannst Du nur per JavaScript erreichen. Setz bei onfocus eine Klasse zum Element. Dieser Klasse gibst Du dann das Hintergrundbild mit. Sobald der Nutzer den Fokus woanders hin ändert, bleibt das Bild auf Grund der Klasse stehen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.10.2014, 19:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.10.2014
Beiträge: 2
sedo befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für den Hinweis, mit Javascript gings nach anfänglicher Verzweiflung auch. Für alle folgenden Leidgenossen, meine Lösung:

Im Header-Bereich Verweis auf die test.js datei im Ordner js:
<script src="js/test.js" type="text/javascript"> </script>

Der input Aufruf:
<input type="text" name="user_name" size="20" class="intxt1" onchange="updateintxt1.call(this)" />

Das steht in der test.js
function updateintxt1(){ this.style.backgroundImage = "url('bilder/1empty.png')"; }

und mein CSS eintrag:

.intxt1{
font-size:26px;
position:absolute;
top:120px;
left:470px;
width:260px;
height:80px;
border:0px;
background-image:url('../bilder/1std.png');
}

Ob es schön gelöst ist weiß ich nicht ^^ funktionieren tuts
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe: Navileiste geht nicht Nino808 (X)HTML 2 19.01.2009 19:12
Brauche hilfe zu vhost.conf bei einem Apache debian vServer onkel-tom Serveradministration und serverseitige Scripte 5 16.11.2008 13:42
Kontaktformular Hilfe nötig :) sunny55 CSS 2 05.08.2008 20:29
HILFE, ich brauche Hilfe von Profis! frambuesa CSS 13 13.06.2008 23:46
Ein herzliches hallo von einem neuen, auf der suche nach hilfe probe Site- und Layoutcheck 2 24.09.2007 15:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:13 Uhr.