Button mit Hintergrundgrafik.

  • Hallo,


    nun mein nächstes Problem. :)

    Ich möchte das wenn man will im Backend bei meinem Modul für den Button auch eine Hintergrundgrafik bestimmen kann.

    Dafür habe ich zwei "form field types" gefunden.

    Einmal das "imagelist" und dann das "url".


    Doch wenn ich im Browser dann Element untersuchen nutze für den Button. Bekomme ich z.B. beim type="url" follgendes zu sehen.


    Es wird also das was im Textfeld steht nicht direkt eingefügt.

    Im Backend gab ich zu Testzwecken dies ein "/images/demo/demo-bg-1.jpg".


    Soll ich um das Problem zu umgehen, einfach ein normales Textfeld nutzen? Weil bei dem type "imagelist" gab es auch diese Ausgabe.


    Vielen Dank


    Edit: Wenn ich aus dem field type="url" ein type="text" mache, bekomme ich die gleiche Meldung angezeigt.

  • Ok, hab da nun gesehen das wohl einmal "" dabei stehen, die nicht dahin gehören.


    Richtig muss es wohl lauten:

    PHP
    1. <button style="font-size:<?php echo $mkbuttontextgr; ?>; border-radius:<?php echo $mkbuttonform; ?>; background-image: url(<?php echo $mkbuttongrafik; ?>);" id='notrufbutton'><?php echo $mkbuttontext; ?></button>

    Hab aber nun den field type="text" benutzt.

    Es wird nun eine Hintergrundgrafik angezeigt.

    Das Hover vom Button ist aber wohl nun deaktiviert.

  • Das hover vom Button geht nun. War ein Layer 8 Fehler. xD

    Ich frage mich aber ob man die Hintergrundgrafik vom Button auch auf die Größe vom Button beschränken kann. Sprich sie würde sich automatisch von der Größe her anpassen.


    Ob das Sinn macht. K.A. wollte eignetlich nur die Option dem Benutzer zur Verfügung stellen.


    Edit: Das hover geht nur bedingt. Die Hintergrundgrafik wird nun nur die Grafik angezeigt die dem hover zugewiesen wurde.

  • Doch, man kann auch ein "background-image hovern". Aber ohne einen Link zum Problem wird dir in diesem Fall wohl kaum jemand wirklich helfen können. Ich glaube nämlich, dass hier kaum noch jemand nachvollziehen kann, was bei deinem Modul übehaupt passiert hmm.

  • Doch, man kann auch ein "background-image hovern". Aber ohne einen Link zum Problem wird dir in diesem Fall wohl kaum jemand wirklich helfen können. Ich glaube nämlich, dass hier kaum noch jemand nachvollziehen kann, was bei deinem Modul übehaupt passiert hmm.

    Hallo,


    nun ich bin dabei dieses:

    Als Modul zu erstellen.

    Mit vielen Einstellmöglichkeiten im Backend.

    Und habe es auch fast geschaft, noch dieses Problem hier. Dann noch eine weitere Auswahlmöglichkeit bzgl. Wie die Meldung ins Bild kommt. Richtung + Geschwindigkeit. Da gibts sicher neue Probleme.


    Und zum Schluss soll das ganze dann über der Webseite "gelegt" werden. Da muss ich wohl leider am Template direkt was werkeln.


    Aber Glaube dann sollte es mit den Einstellmöglichkeiten auch reichen. sonst nimmt das ja nie ein Ende. :)


    Edit: Soweit ist das Modul nun: MK_Qnotruf.zip

  • Hab einen Fehler bei mir gefunden. Da wurde die background-image die für das hover bestimmt war immer angezeigt. Weil ich sie als zweite Variable angab für die gleiche Variable wie die Hintergrundgrafik die immer sichtbar sein soll.


    Aber der Hover:

    den ich hier im Forum bekam, klappt leider da nicht. Ein Fehler von mir drin?


    Vielen Dank. :)

  • Sei bitte nicht böse, aber erwartest du tatsächlich, dass man sich immer wieder die lietzte Version deines Moduls irgendwo selber installiert und auf Fehlersuche geht? Aber gut, einen letzten Tipp gebe ich dir trotzdem noch ;).


    Alle Standardfarben, -bilder und sonstigen Werte gehören in die xml-Datei (mod_qnotruf.xml), nicht in die default.php des Moduls:


    mod_qnotruf.xml:

    Code
    1. <field name="mkbuttongrafikhover" type="text" default="images/demo/demo-bg-1.jpg" label=...


    default.php:

    PHP
    1. <button style="font-size:<?php echo $mkbuttontextgr; ?>; border-radius:<?php echo $mkbuttonform; ?>; id='notrufbutton'><?php echo $mkbuttontext; ?></button>
  • Hi,


    natürlich bin ich nicht böse. :) Ich hatte das komplette Modul nur angehangen, falls meine Quotes nicht ausreichend sind.

    Ich habe leider nicht die Möglichkeit einen direkten Link zu der Webseite zu senden. Da dies alles in einem offline sandbox dings passiert.


    Was du oben als Tipp gibts verstehe ich nicht ganz. Bitte korregieren falls ich falsch liege.

    Die XML Datei ist für die Darstellung im Backend da. Die Default Datei wird ins Template eingefügt.

    Meine Standardwerte, also die Werte die benutzt werden, wenn man im Backend nichts einträgt, sind in meiner CSS Datei hinterlegt.


    Vielen Dank.

  • Bevor ich es vergesse, ich hatte gehofft das oben beim Quelltext von "mir" einfach nur ein Syntaxfehler oder so ist. Das ich vieleicht nur was falsch kopiert hatte oder so.


    Ich arbeite hier mit dem Standard Editor von Windows. Und da ich ihn dadurch paarmal offen habe und immer hin und her switche, kommt mit Sicherheit auch mal ein Copy&Paste Fehler.

  • Hab mal das in meiner CSS offline getestet:

    Code
    1. #notrufbutton {
    2.                 background-image: url(./images/keinhover.png);
    3. }
    4. #notrufbutton:hover {
    5.                 background-image: url(./images/dashover.png);
    6.                 }

    Hat problemlos funktioniert.

    Ich glaube ich weis nun warum der Code:

    nicht funktioniert. Da fehlt ja paar Angaben. Es müsste natürlich dann heissen background-image: url("hier derlinkzumbild");


    Hoffe ich zumindest. :)

  • Nachtrag.

    Ich hab mich nun doch dafür entschieden, das im Backend für die Hintergrundgrafik vom Button das field vom Typ imagelist zu nutzen.

    Die Grafiken werden dort auch dann in der Auswahl angezeigt.

    Aber wenn ich mir dann das ganze auf der Webseite ansehe, bekomme ich die Meldung "Grafik konnte nicht geladen werden" über das "Element untersuchen" angezeigt.


    Was mir angezeigt wird ist: background-images: url(keinhover.png);

    Doch hier müsste sicher eigentlich noch ein Verzeichnis mit drin stehen oder?

    Hab das nun hinzugefügt.

    Jetzt steht da url(./media/mod_qnotruf/images/keinhover.png)


    Wird aber immer noch nicht aufgerufen. Hm.