Autor Thema: [erledigt] Pagebutton mit :action JPG  (Gelesen 98 mal)

Offline der Bernhard

  • New Member
  • *
  • Beiträge: 25
[erledigt] Pagebutton mit :action JPG
« am: 30 November 2018, 14:14:48 »
Hallo,
kann mir irgendwer sagen, ob es möglich ist einen Pagebutton mit Bildern darzustellen der den Inhalt (2tes Bild) wechselt sobald er selektiert wurde?

Mit :action habe ich schon probiert, das funktioniert nur solange man klickt, nicht aber sobald man loslässt.

<style type="text/css">
        .raffON { background: url(/fhem/tablet/images/u_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                                 
        .raffON:action { background: url(/fhem/tablet/images/c_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                         
</style>

...
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" style="background-color:transparent;">
  <div class="left-align prefetch">
  <div data-type="pagebutton" data-fade-duration="0" data-url="#1_raffstores.html" data-load="#1_raffstores" data-background-icon="" data-active-pattern="(.*#1_raffstores.html||.*#2_raffstores_etage_.*.html)" data-icon="raffON" class="default"></div>
  </div>
</li>
...

So wie auf den Bildern hätte ich es gern. Hat das schon jemand umgesetzt?

Danke und LG
« Letzte Änderung: 30 November 2018, 15:44:17 von der Bernhard »

Offline der Bernhard

  • New Member
  • *
  • Beiträge: 25
Antw:Pagebutton mit :action JPG
« Antwort #1 am: 30 November 2018, 15:44:05 »
Hat sich erledigt... Hab eine ID erstellt und das icon einfach leer gelassen..

<style type="text/css">
#raffON { background: url(/fhem/tablet/images/u_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }                                                                                                 
#raffON .active { background: url(/fhem/tablet/images/c_raff_btn.jpg) no-repeat; width: 80px; height: 80px; }   
</style>

...
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" style="background-color:transparent;">
  <div class="left-align prefetch">
  <div data-type="pagebutton" data-fade-duration="0" data-url="#1_raffstores.html" data-load="#1_raffstores" data-background-icon="" data-active-pattern="(.*#1_raffstores.html||.*#2_raffstores_etage_.*.html)" data-icon="" id="raffON" class="default big"></div>
  </div>
</li>
...

 

decade-submarginal