[erledigt] Pagebutton mit :action JPG

[der Bernhard]

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.

Code Auswählen Erweitern


<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>


Code Auswählen Erweitern


...
<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

[der Bernhard]

Hat sich erledigt... Hab eine ID erstellt und das icon einfach leer gelassen..

Code Auswählen Erweitern


<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>


Code Auswählen Erweitern


...
<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>
...