kostenloser Webspace werbefrei: lima-city


Bildertausch per JS?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.

    So...

    ich habe folgendes problem:

    ich habe ein login feld (2 felder, das eine ist das username feld das andere das password feld)... diese felder haben ein hintergrund bild...
    sobald text eingegeben wird bzw text drin steht soll der hintergrund ge?ndert werden, von bild1.jpg auf bild1focus.jpg sagen wir jetzt mal einfach...

    das er beim focus das ?ndert ist ja einfach (css), aber das es danach noch auf dem focus bild bleibt ist mir ein r?tsel...

    so, freue mich auf ne l?sung...

    gru
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Gib mal den Source, wahrscheinlich hast du dich nur vertippt.

    Verwendest du eine reine CSS L?sung, oder nimmst du auch JavaScript dazu ? (Man kann mit CSS schlie?lich nicht ?berpr?fen, ob ein Eingabefeld leer ist)
  4. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.

    der css stil:

    .login_name
    {
    	width: 100px;
    	height: 17px;
    	background: url('../images/_-45.jpg');
    	font-family: "Times New Roman",Times,serif;
    	font-size: 12px;
    	border: 0px;
    }
    .login_name:focus
    {
    	width: 100px;
    	height: 17px;
    	background: url('../images/_-45focus.jpg');
    	font-family: "Times New Roman",Times,serif;
    	font-size: 12px;
    	border: 0px;
    }
    .login_pass
    {
    	width: 100px;
    	height: 17px;
    	background: url('../images/_-47.jpg');
    	font-family: "Times New Roman",Times,serif;
    	font-size: 12px;
    	border: 0px;
    }
    .login_pass:focus
    {
    	width: 100px;
    	height: 17px;
    	background: url('../images/_-47focus.jpg');
    	font-family: "Times New Roman",Times,serif;
    	font-size: 12px;
    	border: 0px;
    }


    die felder:
    <input type='text' name='username' class='login_name'>

    UND
    <input type='password' name='password' class='login_pass'>


    so... wirste daraus schlau? :D

    gru?
    samael
  5. Erstmal hei?t es background-image:url()
    Und nicht nur background
    Die Angaben in url() sollten ohne Anf?hrungszeichen stehen.


    Das war aber nicht der entscheidene Fehler.
    Den habe ich nicht gefunden, aber nachdem ich lange genug rumprobiert habe, ging es.

    <style type="text/css">/* <![CDATA[ */
    
    .login_name
    
    {
    
        width: 100px;
    
        height: 17px;
    
        background-image: url(../home/tygatur/DDDGH/DDDGH1st.gif);
    
    
        font-family: "Times New Roman",Times,serif;
    
        font-size: 12px;
    
        border: 0px;
    
    }
    
    .login_name:focus
    
    {
    
        width: 100px;
    
        height: 17px;
    
        background-image: url(../home/tygatur/DDDGH/OSOR.jpg);
    
        font-family: "Times New Roman",Times,serif;
    
        font-size: 12px;
    
        border: 0px;
    
    }
    
    
    
    .login_pass
    
    {
    
        width: 100px;
    
        height: 17px;
    
    	background-image: url(../home/tygatur/DDDGH/DDDGH1st.gif);
    
        font-family: "Times New Roman",Times,serif;
    
    	font-size: 12px;
    
        border: 0px;
    
    }
    
    
    
    .login_pass:focus
    
    {
    
        width: 100px;
    
        height: 17px;
    
        background-image: url(../home/tygatur/DDDGH/OSOR.jpg);
    
        font-family: "Times New Roman",Times,serif;
    
        font-size: 12px;
    
        border: 0px;
    }
    
    
    /* ]]> */</style>
  6. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.


    Erstmal hei?t es background-image:url()
    Und nicht nur background
    Die Angaben in url() sollten ohne Anf?hrungszeichen stehen.

    also, man kann sowohl background als auch background-image schreiben, denn man kann unter background auch noch weiter informationen angeben, zB x|y-repeat etc... und background-image kann man nur das bild angeben. und wenn ich die angaben in url ohne anf?hrungszeichen setze kann er mir das bild nicht anzeigen...


    Das war aber nicht der entscheidene Fehler.
    Den habe ich nicht gefunden, aber nachdem ich lange genug rumprobiert habe, ging es.


    das was ich gepostet habe waren nur ausz?ge von einem LANGEN quelltext, habe nur die entscheidenden stellen gepostet... und das was du angegeben hast ist genau das was ich bei mir drin habe, nur in gek?rzter form wegen dem ausschnitt...

    also, keine wirkliche l?sung ^^

    gru?
    samael

    ps: es muss mit js sein, weil man doch nur mit js pr?fen kann ob in einem feld was steht, oder?
  7. bei mir hat es aber gefunzt, so wie du es haben wolltest (Bildwechsel eben). Probier mal meinen Code aus.

    Ja, ohne JS geht das net.

    Hier der Code f?r 1 <input>
    <input type='text' name='username' class='login_name' onkeyup="if(this.value.length>0)this.style.backgroundImage='url(../home/tygatur/DDDGH/OSOR.jpg)';else this.style.backgroundImage='url(../home/tygatur/DDDGH/DDDGH1st.gif)';">


    Einfach die Pfade austauschen und das m?sste funzen.
  8. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.

    mein css teil hat auch funktioniert, dein js teste ich jetzt mal....
  9. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.

    da haben wir noch ein kleines problem...

    wenn die seite geladen wird wird gar kein bild angezeigt... wie ?nder ich das?!?

    gru?
    samael
  10. samael schrieb:
    da haben wir noch ein kleines problem...

    wenn die seite geladen wird wird gar kein bild angezeigt... wie ?nder ich das?!?

    gru?
    samael


    Du musst nat?rlich erstmal das Standard-Bild mit CSS festlegen.
  11. Autor dieses Themas

    samael

    samael hat kostenlosen Webspace.

    danke
    kann geschlossen werden
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!