Tasten durch Gif´s ersetzen?

    Hi Leutz

    Ich bin immer noch mit dem Fine-Tuning meiner Page beschäftigt und obwohl ich immer weiter komme, gibt es auch immer neue Schwierigkeiten.

    Derzeit bin ich damit beschäftigt, die Texte in meinem Formmailer durch Gifs zu ersezten. Das ist ja eigentlich auch gar kein Problem, wenn da nicht die beiden Tasten wären:

    [Blockierte Grafik: http://img365.imageshack.us/img365/2826/formmailer5nt.jpg]

    Gibt es irgendeine Möglichkeit anstelle der Schriften auf den Tasten Gif-Datein erscheinen zu lassen? Oder die Tasten durch Gif-Dateien zu ersetzen?

    Dies ist der Quelltext der betreffenden Stelle:

    Code
    <div align=center><input name="btnSend" id="btnSend" type="submit" value="Senden" />
<input name="btnDelete" id="btnDelete" type="reset" value="Verwerfen" /></div>

    Gruß

    darkblue

    jep - das gibt es.
    aber ich fände das schlecht wenn du für jeden text usw. ein bild nehmen würdest (ladezeit).

    input {
    background-image : deinpfadzumbild.jpg;
    alles sonstigen css definierungen
    }

    das musst du in deinem stylesheet einfügen ...


    oder im head:

    <head>
    <style="text/css">
    hier
    </style>
    </head>

    Wenn ich´s so

    Code
    <div align=center><input background-image="senden.gif" name="btnSend" id="btnSend" type="submit" value="" />
<input background-image="verwerfen.gif" name="btnDelete" id="btnDelete" type="reset" value="" /></div>

    einbau, tut sich gar nix.

    Hab ich wohl was falsch verstanden, oder?

    Gruß

    darkblue

    Code
    <div align=center><input background-image="senden.gif" name="btnSend" id="btnSend" type="submit" value="" />
<input background-image="verwerfen.gif" name="btnDelete" id="btnDelete" type="reset" value="" /></div>

    ersetzen mit:

    Code
    <div align=center>
  <input style="background-image: url("senden.gif")" name="btnSend" id="btnSend" type="submit" value="" />
  <input style="background-image: url("verwerfen.gif")" name="btnDelete" id="btnDelete" type="reset" value="" />
</div>

    Edit:

    am besten noch durch width: und heiht: angaben ergänze, die die abmessungen der Bilder angeben, z.B. so:

    Code
    <div align=center>
  <input style="background-image: url("senden.gif"); width: 100px; height: 30px" name="btnSend" id="btnSend" type="submit" value="" />
  <input style="background-image: url("verwerfen.gif"); width: 100px; height: 30px" name="btnDelete" id="btnDelete" type="reset" value="" />
</div>
    Zitat von Modula


    am besten noch durch width: und heiht: angaben ergänze, die die abmessungen der Bilder angeben, z.B. so:

    Code
    <div align=center>
  <input style="background-image: url("senden.gif"); width: 100px; height: 30px" name="btnSend" id="btnSend" type="submit" value="" />
  <input style="background-image: url("verwerfen.gif"); width: 100px; height: 30px" name="btnDelete" id="btnDelete" type="reset" value="" />
</div>

    Dann sieht´s so aus:

    [Blockierte Grafik: http://img360.imageshack.us/img360/2726/formmailer5nv.jpg]

    Was genau muß den jetzt noch im Head stehen?

    Gruß

    darkblue

    Zitat von ph0re

    du musst wohl noch die breite angeben

    style="width: 110px; height: 110px"

    mfg - phore

    Hier habe ich genau die Größe der Gif-Dateien angegeben

    Gruß

    darkblue

    Zitat von Modula

    kannst du ggf. mal einen Link zu ner onlineversion geben?

    Online ist nur die alte Textversion.
    An der Gif-Version bastel ich derzeit nur offline rum.

    Gruß

    darkblue