Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Vis Image auf vis Button

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.6k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.8k

Vis Image auf vis Button

Geplant Angeheftet Gesperrt Verschoben Visualisierung
19 Beiträge 9 Kommentatoren 7.4k Aufrufe 6 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • D Offline
    D Offline
    DrFirebird
    schrieb am zuletzt editiert von
    #3

    ja aber, über den z-index kann ich ja nur die sichtbarkeit regeln.

    Lege ich ein image (z-index 1) auf einen Button (z-index 0), kann ich beide Objekte sehen,

    aber das Image reagiert nicht auf ein Click-Event.

    Ist ja soweit auch logisch und richtig, mein Ziel ist es aber, wenn mehrere Ebenen übereinander liegen,

    daß diese als ein Objekt behandelt werden.

    Im Prinzip möchte ich erreichen, daß 2 oder 3 oder 4 Objekte, die übereinander liegen, zu einem verschmelzen.

    1 Antwort Letzte Antwort
    0
    • N Offline
      N Offline
      Nippy
      schrieb am zuletzt editiert von
      #4

      du möchtest also mit zwei übereinander / nebeneinander gelegten Widgets z.b. zwei Lampen gleichzeitig schalten, verstehe ich das richtig?

      1 Antwort Letzte Antwort
      0
      • htreckslerH Offline
        htreckslerH Offline
        htrecksler
        Forum Testing
        schrieb am zuletzt editiert von
        #5

        > Im Prinzip möchte ich erreichen, daß 2 oder 3 oder 4 Objekte, die übereinander liegen, zu einem verschmelzen
        Ich befürchte, das wird nicht gehen.

        Aber wenn Du (unterstützt durch Screenshots) beschreibst was du eigenlich erreichen willst, vielleicht kann geholfen werden.

        Gruss Hermann

        ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

        1 Antwort Letzte Antwort
        0
        • N Offline
          N Offline
          Nippy
          schrieb am zuletzt editiert von
          #6

          Da ich Java / JS nicht so mächtig bin, würde ich mir in diesem Fall mit NodeRed behelfen.

          • Leg dir die passenden Icons nebeneinander, Z-Index=1

          • Darüber einen durchsichtigen Rahmen bzw. durchsichtigen Schalter / Taster der mit einer CUxD Funktion / Programmexecute / Taster o.ä. verknüpft ist, Z-Index = 2

          • Unter NodeRed liest du den Status von diesem Rahmen bzw. der verknüpften Aktion aus

          • Als Ausgang schaltest du dann dementsprechend viele Funktionen

          1 Antwort Letzte Antwort
          0
          • M Offline
            M Offline
            MrLee
            schrieb am zuletzt editiert von
            #7

            Moin!

            Wenn ich das richtig verstehe willst Du eine Aktion auslösen wenn Du auf ein Bild klickst…

            Das löse ich (für Navigation) zum Beispiel so:

            image z-Index=1

            Button, transparent, z-Index=2

            Der Buttun ist damit oben und klickbar, das Bild ist aber zu sehen da der button transparent ist.

            bis denne

            Mr.Lee

            1 Antwort Letzte Antwort
            0
            • D Offline
              D Offline
              DrFirebird
              schrieb am zuletzt editiert von
              #8

              @MrLee

              Genau so etwas habe ich gemeint. Vielen Dank für den Tip.

              Funktioniert so, wie ich es grundsätzlich haben wollte, nur das Bild, bzw. der Button wirken dann ziemlich blass.

              Habe mit allen Möglichen Transparentwerten getestet,

              1 Antwort Letzte Antwort
              0
              • M Offline
                M Offline
                MrLee
                schrieb am zuletzt editiert von
                #9

                Moin!

                Also bei mir ist durchsichtig = durchsichtig :-)

                anbei wie ich es mache
                311_unbenannt.png

                für den durchsichtigen overlay

                1 Antwort Letzte Antwort
                0
                • D Offline
                  D Offline
                  DrFirebird
                  schrieb am zuletzt editiert von
                  #10

                  liegt wahrscheinlich an meinem individuelen CSS Style, daß es bei mir anders aussieht.

                  1 Antwort Letzte Antwort
                  0
                  • P Offline
                    P Offline
                    pgBroker
                    schrieb am zuletzt editiert von
                    #11

                    Der Topic ist uralt aber ich stand gerade vor demselben Problem und habe eine Lösung gefunden:

                    Im CSS Reiter des oben liegenden Bilds eingeben:

                    .noclick{pointer-events: none }

                    Im Reiter des Widgets unter Generell bei CSS Klasse eingeben:

                    noclick

                    fertig.

                    Der Klick geht jetzt quasi durch das Bild hindurch auf den darunter liegenden Button.

                    Vielleicht hilft es zukünftig jemandem.

                    M R 2 Antworten Letzte Antwort
                    2
                    • P pgBroker

                      Der Topic ist uralt aber ich stand gerade vor demselben Problem und habe eine Lösung gefunden:

                      Im CSS Reiter des oben liegenden Bilds eingeben:

                      .noclick{pointer-events: none }

                      Im Reiter des Widgets unter Generell bei CSS Klasse eingeben:

                      noclick

                      fertig.

                      Der Klick geht jetzt quasi durch das Bild hindurch auf den darunter liegenden Button.

                      Vielleicht hilft es zukünftig jemandem.

                      M Offline
                      M Offline
                      madkaz
                      schrieb am zuletzt editiert von
                      #12

                      @pgBroker Super, danke.

                      1 Antwort Letzte Antwort
                      0
                      • P pgBroker

                        Der Topic ist uralt aber ich stand gerade vor demselben Problem und habe eine Lösung gefunden:

                        Im CSS Reiter des oben liegenden Bilds eingeben:

                        .noclick{pointer-events: none }

                        Im Reiter des Widgets unter Generell bei CSS Klasse eingeben:

                        noclick

                        fertig.

                        Der Klick geht jetzt quasi durch das Bild hindurch auf den darunter liegenden Button.

                        Vielleicht hilft es zukünftig jemandem.

                        R Offline
                        R Offline
                        ravenmaster887
                        schrieb am zuletzt editiert von
                        #13

                        @pgbroker

                        Hallo zusammen, das Thema ist zwar schon etwas älter, aber ich versuche grade auf Vis 2 umzusteigen. Dort funktioniert genau der beschriebene Wert noclick in der CSS Klasse unter Generell nicht mehr. Habt ihr eine Idee, wie man genau die Funktion auf in Vis 2 hingekommen?

                        Hintergrund nochmal kurz erklärt.

                        Ich habe einen Switch über dem ein Bild liegt. Klicke ich nun auf das Bild passiert nichts mit dem Schalter dahinter. Mit den Wert noclick in der CSS-Klasse hat das Bild vor dem Schalter gelegen, konnte aber nicht eigens angeklickt werden und es wurde der Schalter betätigt, wenn man auf das Bild geklickt hat. :) Hoffe das war irgendwie verständlich.

                        CodierknechtC BananaJoeB 2 Antworten Letzte Antwort
                        0
                        • R ravenmaster887

                          @pgbroker

                          Hallo zusammen, das Thema ist zwar schon etwas älter, aber ich versuche grade auf Vis 2 umzusteigen. Dort funktioniert genau der beschriebene Wert noclick in der CSS Klasse unter Generell nicht mehr. Habt ihr eine Idee, wie man genau die Funktion auf in Vis 2 hingekommen?

                          Hintergrund nochmal kurz erklärt.

                          Ich habe einen Switch über dem ein Bild liegt. Klicke ich nun auf das Bild passiert nichts mit dem Schalter dahinter. Mit den Wert noclick in der CSS-Klasse hat das Bild vor dem Schalter gelegen, konnte aber nicht eigens angeklickt werden und es wurde der Schalter betätigt, wenn man auf das Bild geklickt hat. :) Hoffe das war irgendwie verständlich.

                          CodierknechtC Online
                          CodierknechtC Online
                          Codierknecht
                          Developer Most Active
                          schrieb am zuletzt editiert von Codierknecht
                          #14

                          @ravenmaster887 sagte in Vis Image auf vis Button:

                          Ich habe einen Switch über dem ein Bild liegt

                          Das kann eigentlich aus Prinzip nicht funktionieren.
                          Wenn ein Bild (mit höherem Z-Index) über einem anderen Element liegt, kriegt dieses Element nix von einem Klick mit.

                          Ich würde dem Button per CSS ein Bild verpassen statt etwas darüber zu legen.

                          Ich muss aber zugeben, dass meine HTML-Kenntnisse durchweg älter sind.

                          Edit
                          Mit CSS3 scheint das tatsächlich vorgesehen zu sein. Allerdings nur im Draft.
                          a12a4c42-82c0-4554-8fdd-1b1aca0df3f0-image.png

                          @ravenmaster887
                          Zeig mal, wie Du das implementiert hast.
                          https://forum.iobroker.net/topic/51555/hinweise-für-gute-forenbeiträge

                          "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                          Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                          HmIP|ZigBee|Tasmota|Unifi
                          Zabbix Certified Specialist
                          Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                          R 1 Antwort Letzte Antwort
                          0
                          • R ravenmaster887

                            @pgbroker

                            Hallo zusammen, das Thema ist zwar schon etwas älter, aber ich versuche grade auf Vis 2 umzusteigen. Dort funktioniert genau der beschriebene Wert noclick in der CSS Klasse unter Generell nicht mehr. Habt ihr eine Idee, wie man genau die Funktion auf in Vis 2 hingekommen?

                            Hintergrund nochmal kurz erklärt.

                            Ich habe einen Switch über dem ein Bild liegt. Klicke ich nun auf das Bild passiert nichts mit dem Schalter dahinter. Mit den Wert noclick in der CSS-Klasse hat das Bild vor dem Schalter gelegen, konnte aber nicht eigens angeklickt werden und es wurde der Schalter betätigt, wenn man auf das Bild geklickt hat. :) Hoffe das war irgendwie verständlich.

                            BananaJoeB Online
                            BananaJoeB Online
                            BananaJoe
                            Most Active
                            schrieb am zuletzt editiert von
                            #15

                            @ravenmaster887 also für meinen Grundriss (in VIS1) habe ich das Bild als Hintergrund genommen und die Buttons darüber gelegt (basic - Bulb on/off). Den Buttons habe ich schlichtweg ein Transparentes .png als Bild gegeben (nur 1 Pixel groß), bei eingeschaltet ein Bild wo der Raum beleuchtet ist.

                            So in der Art, sollte das doch auch in VIS 2 noch funktionieren, die "Basic - Bulb on/off" gibt es auch dort noch

                            b1017f25-847d-4272-b946-f38249bf013a-image.png
                            f3573b74-86ee-4a55-921e-a96a580706b5-image.png
                            011ff4e9-75b8-4f11-8863-36a62ac1e88f-image.png

                            ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                            1 Antwort Letzte Antwort
                            0
                            • CodierknechtC Codierknecht

                              @ravenmaster887 sagte in Vis Image auf vis Button:

                              Ich habe einen Switch über dem ein Bild liegt

                              Das kann eigentlich aus Prinzip nicht funktionieren.
                              Wenn ein Bild (mit höherem Z-Index) über einem anderen Element liegt, kriegt dieses Element nix von einem Klick mit.

                              Ich würde dem Button per CSS ein Bild verpassen statt etwas darüber zu legen.

                              Ich muss aber zugeben, dass meine HTML-Kenntnisse durchweg älter sind.

                              Edit
                              Mit CSS3 scheint das tatsächlich vorgesehen zu sein. Allerdings nur im Draft.
                              a12a4c42-82c0-4554-8fdd-1b1aca0df3f0-image.png

                              @ravenmaster887
                              Zeig mal, wie Du das implementiert hast.
                              https://forum.iobroker.net/topic/51555/hinweise-für-gute-forenbeiträge

                              R Offline
                              R Offline
                              ravenmaster887
                              schrieb am zuletzt editiert von
                              #16

                              @codierknecht

                              Ich habe so etwas erstellt: cc684f5e-f461-46c8-aec9-f1e34f2cad3f-grafik.png
                              Der Button hat quasi ein Bild und zur Verdeutlichung und Unterscheidung habe ich eine weiteres Bild drübergelegt und in VIS1 - wie gesagt - mit dem Wert noclick in CSS-Klasse unter 2c24c2a1-3d8e-4f55-b23b-e471534b8f7d-grafik.png quasi so umgestellt, dass beim Draufklicken der Button darunter betätigt wird.

                              Und genau dieser noclick Parameter funktioniert in VIS2 nicht mehr.

                              Danke für eure Hilfe. :)

                              CodierknechtC 1 Antwort Letzte Antwort
                              0
                              • R ravenmaster887

                                @codierknecht

                                Ich habe so etwas erstellt: cc684f5e-f461-46c8-aec9-f1e34f2cad3f-grafik.png
                                Der Button hat quasi ein Bild und zur Verdeutlichung und Unterscheidung habe ich eine weiteres Bild drübergelegt und in VIS1 - wie gesagt - mit dem Wert noclick in CSS-Klasse unter 2c24c2a1-3d8e-4f55-b23b-e471534b8f7d-grafik.png quasi so umgestellt, dass beim Draufklicken der Button darunter betätigt wird.

                                Und genau dieser noclick Parameter funktioniert in VIS2 nicht mehr.

                                Danke für eure Hilfe. :)

                                CodierknechtC Online
                                CodierknechtC Online
                                Codierknecht
                                Developer Most Active
                                schrieb am zuletzt editiert von
                                #17

                                @ravenmaster887 sagte in Vis Image auf vis Button:

                                mit dem Wert noclick in CSS-Klasse

                                Eine entsprechende Klasse hast Du im CSS auch angelegt und mit den passenden Einstellungen versehen?

                                .noclick {
                                   pointer-events: none;
                                }
                                

                                "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                                Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                                HmIP|ZigBee|Tasmota|Unifi
                                Zabbix Certified Specialist
                                Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                                R 1 Antwort Letzte Antwort
                                0
                                • CodierknechtC Codierknecht

                                  @ravenmaster887 sagte in Vis Image auf vis Button:

                                  mit dem Wert noclick in CSS-Klasse

                                  Eine entsprechende Klasse hast Du im CSS auch angelegt und mit den passenden Einstellungen versehen?

                                  .noclick {
                                     pointer-events: none;
                                  }
                                  
                                  R Offline
                                  R Offline
                                  ravenmaster887
                                  schrieb am zuletzt editiert von
                                  #18

                                  @codierknecht sagte in Vis Image auf vis Button:

                                  .noclick {

                                  Genau diese Info war die die mir gefehlt hat. Damit geht es. Super Danke. :)

                                  1 Antwort Letzte Antwort
                                  0
                                  • R Offline
                                    R Offline
                                    ravenmaster887
                                    schrieb am zuletzt editiert von
                                    #19

                                    Verdammt, das stand oben ja bereits. Habe ich überlesen. Mist.

                                    1 Antwort Letzte Antwort
                                    0
                                    Antworten
                                    • In einem neuen Thema antworten
                                    Anmelden zum Antworten
                                    • Älteste zuerst
                                    • Neuste zuerst
                                    • Meiste Stimmen


                                    Support us

                                    ioBroker
                                    Community Adapters
                                    Donate

                                    843

                                    Online

                                    32.4k

                                    Benutzer

                                    81.5k

                                    Themen

                                    1.3m

                                    Beiträge
                                    Community
                                    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                    ioBroker Community 2014-2025
                                    logo
                                    • Anmelden

                                    • Du hast noch kein Konto? Registrieren

                                    • Anmelden oder registrieren, um zu suchen
                                    • Erster Beitrag
                                      Letzter Beitrag
                                    0
                                    • Home
                                    • Aktuell
                                    • Tags
                                    • Ungelesen 0
                                    • Kategorien
                                    • Unreplied
                                    • Beliebt
                                    • GitHub
                                    • Docu
                                    • Hilfe