Popup durch Bild bearbeitet von Player X 14.04.2026 19:19 Ups, da habe ich wohl grade zum falschen Zeitpunkt reagiert. [Die 2. Antwort von _Gunnar Bittersmann_](https://forum.selfhtml.org/self/2026/apr/14/popup-durch-bild/1824552#m1824552) kam nämlich grade, als ich noch beim Schreiben war. Da hätte ich wohl doch lieber noch ein bisschen warten sollen. 😶 > @@Player X > > > Wahrscheinlich werde ich die Frage dann wohl doch weglassen > > Möglicherweise eine gute Entscheidung … > > > denn durch den Button würde es in diesem Fall leider nicht mehr so schön aussehen. > > … mit einer völlig falschen Begründundung. > > Die richtige Begründung wäre: Der Zwischenschritt macht für Nutzer keinen Sinn, sondern nervt nur. > > 🖖 Live long and prosper > > {:@en} Naja, mit den ganzen Links wird man einfach nur auf eine andere Seite weitergeleitet, aber der eine Link würde gleich das Spiel starten, und weil da nicht angezeigt wird, dass dadurch das Spiel gestartet wird, weil dort schon ein anderer Text hingehört (außer unten links, wenn der Link durch den Mauszeiger angezeigt wird), wollte ich diese Information noch auf eine andere Art mitteilen. > @@Gunnar Bittersmann > > > Was du tun kannst: Ein Bild in einen Button packen. > > `<input type="image">`{:.language-html} ist auch ein Button. [Codepen](https://codepen.io/gunnarbittersmann/pen/NPReaVy) > > > 🖖 Live long and prosper > > {:@en} Jedenfalls funktioniert es jetzt. Das mit __<input type="image">__ ist genau das Richtige. Vielen Dank! 😊 Ich werde dann mal schauen, ob ich noch die Farben vom Hintergrund und Text davon ändern kann. Im Moment sieht es bei mir so aus (wobei der Link im Moment noch auch die gleiche Textfarbe hat und nicht unterstrichen ist). ~~~ html <html> <head> <style>body { font-family: "Motiva Sans", Arial, Helvetica, sans-serif; background-color: #1b2838; } input { height: 96px; width: 96px; padding: 0px; color: currentColor; border: thin solid; }</style> </head> <body> <table> <colgroup> <col width="344" /> <col width="128" /> <col span="3" width="104" /> </colgroup> <tbody class="pin"> <tr style="color:#e39117"> <td><font size="5">x200 Orange Voucher</font></td> <td><input type="image" popovertarget="run" src="https://dl.fruitbatfactory.com/steam_icons/orange_voucher_200.png" title="A ticket that can traded in the Shop for 200 Oranges."/> <div popover="" id="run"> <p>100% Orange Juice starten?</p> <p align="center"><a href="steam://rungameid/282800">Ok!</a></p> </div></td> <td><p align="center"><font color="black">0</font></p></td> <td><p align="center">1</p></td> <td><p align="center"><font color="black">0</font></p></td> </tr> </tbody> </table> </body> </html> ~~~ PS: Ich wusste ja noch gar nicht, dass auf codepen.io unbedingt __px__ hingeschrieben werden muss, damit das mit der Größe funktioniert. Bei mir (Firefox) funktioniert es auch schon ohne __px__. 🤔
Popup durch Bild bearbeitet von Player X 14.04.2026 19:44 Ups, da habe ich wohl grade zum falschen Zeitpunkt reagiert. [Die 2. Antwort von _Gunnar Bittersmann_](https://forum.selfhtml.org/self/2026/apr/14/popup-durch-bild/1824552#m1824552) kam nämlich grade, als ich noch beim Schreiben war. Da hätte ich wohl doch lieber noch ein bisschen warten sollen. 😶 > @@Player X > > > Wahrscheinlich werde ich die Frage dann wohl doch weglassen > > Möglicherweise eine gute Entscheidung … > > > denn durch den Button würde es in diesem Fall leider nicht mehr so schön aussehen. > > … mit einer völlig falschen Begründundung. > > Die richtige Begründung wäre: Der Zwischenschritt macht für Nutzer keinen Sinn, sondern nervt nur. > > 🖖 Live long and prosper > > {:@en} Naja, mit den ganzen Links wird man einfach nur auf eine andere Seite weitergeleitet, aber der eine Link würde gleich das Spiel starten, und weil da nicht angezeigt wird, dass dadurch das Spiel gestartet wird, weil dort schon ein anderer Text hingehört (außer unten links, wenn der Link durch den Mauszeiger angezeigt wird), wollte ich diese Information noch auf eine andere Art mitteilen. > @@Gunnar Bittersmann > > > Was du tun kannst: Ein Bild in einen Button packen. > > `<input type="image">`{:.language-html} ist auch ein Button. [Codepen](https://codepen.io/gunnarbittersmann/pen/NPReaVy) > > > 🖖 Live long and prosper > > {:@en} Jedenfalls funktioniert es jetzt. Das mit __<input type="image">__ ist genau das Richtige. Vielen Dank! 😊 Ich werde dann mal schauen, ob ich noch die Farben vom Hintergrund und Text davon ändern kann. Im Moment sieht es bei mir so aus (wobei der Link auch die gleiche Textfarbe hat und nicht unterstrichen ist). ~~~ html <html> <head> <style>body { font-family: "Motiva Sans", Arial, Helvetica, sans-serif; background-color: #1b2838; } input { height: 96px; width: 96px; padding: 0px; color: currentColor; border: thin solid; }</style> </head> <body> <table> <colgroup> <col width="344" /> <col width="128" /> <col span="3" width="104" /> </colgroup> <tbody class="pin"> <tr style="color:#e39117"> <td><font size="5">x200 Orange Voucher</font></td> <td><input type="image" popovertarget="run" src="https://dl.fruitbatfactory.com/steam_icons/orange_voucher_200.png" title="A ticket that can traded in the Shop for 200 Oranges."/> <div popover="" id="run"> <p>100% Orange Juice starten?</p> <p align="center"><a href="steam://rungameid/282800">Ok!</a></p> </div></td> <td><p align="center"><font color="black">0</font></p></td> <td><p align="center">1</p></td> <td><p align="center"><font color="black">0</font></p></td> </tr> </tbody> </table> </body> </html> ~~~ PS: Ich wusste ja noch gar nicht, dass auf codepen.io unbedingt __px__ hingeschrieben werden muss, damit das mit der Größe funktioniert. Bei mir (Firefox) funktioniert es auch schon ohne __px__. 🤔
Popup durch Bild bearbeitet von Player X 14.04.2026 19:44 Ups, da habe ich wohl grade zum falschen Zeitpunkt reagiert. [Die 2. Antwort von _Gunnar Bittersmann_](https://forum.selfhtml.org/self/2026/apr/14/popup-durch-bild/1824552#m1824552) kam nämlich grade, als ich noch beim Schreiben war. Da hätte ich wohl doch lieber noch ein bisschen warten sollen. 😶 > @@Player X > > > Wahrscheinlich werde ich die Frage dann wohl doch weglassen > > Möglicherweise eine gute Entscheidung … > > > denn durch den Button würde es in diesem Fall leider nicht mehr so schön aussehen. > > … mit einer völlig falschen Begründundung. > > Die richtige Begründung wäre: Der Zwischenschritt macht für Nutzer keinen Sinn, sondern nervt nur. > > 🖖 Live long and prosper > > {:@en} Naja, mit den ganzen Links wird man einfach nur auf eine andere Seite weitergeleitet, aber der eine Link würde gleich das Spiel starten, und weil da nicht angezeigt wird, dass dadurch das Spiel gestartet wird, weil dort schon ein anderer Text hingehört (außer unten links, wenn der Link durch den Mauszeiger angezeigt wird), wollte ich diese Information noch auf eine andere Art mitteilen. > @@Gunnar Bittersmann > > > Was du tun kannst: Ein Bild in einen Button packen. > > `<input type="image">`{:.language-html} ist auch ein Button. [Codepen](https://codepen.io/gunnarbittersmann/pen/NPReaVy) > > > 🖖 Live long and prosper > > {:@en} Jedenfalls funktioniert es jetzt. Das mit __<input type="image">__ ist genau das Richtige. Vielen Dank! 😊 Ich werde dann mal schauen, ob ich noch die Farben vom Hintergrund und Text davon ändern kann. Im Moment sieht es bei mir so aus. ~~~ html <html> <head> <style>body { font-family: "Motiva Sans", Arial, Helvetica, sans-serif; background-color: #1b2838; } input { height: 96px; width: 96px; padding: 0px; color: currentColor; border: thin solid; }</style> </head> <body> <table> <colgroup> <col width="344" /> <col width="128" /> <col span="3" width="104" /> </colgroup> <tbody class="pin"> <tr style="color:#e39117"> <td><font size="5">x200 Orange Voucher</font></td> <td><input type="image" popovertarget="run" src="https://dl.fruitbatfactory.com/steam_icons/orange_voucher_200.png" title="A ticket that can traded in the Shop for 200 Oranges."/> <div popover="" id="run"> <p>100% Orange Juice starten?</p> <p align="center"><a href="steam://rungameid/282800">Ok!</a></p> </div></td> <td><p align="center"><font color="black">0</font></p></td> <td><p align="center">1</p></td> <td><p align="center"><font color="black">0</font></p></td> </tr> </tbody> </table> </body> </html> ~~~ PS: Ich wusste ja noch gar nicht, dass auf codepen.io unbedingt __px__ hingeschrieben werden muss, damit das mit der Größe funktioniert. Bei mir (Firefox) funktioniert es auch schon ohne __px__. 🤔
Popup durch Bild bearbeitet von Player X 14.04.2026 19:39 Ups, da habe ich wohl grade zum falschen Zeitpunkt reagiert. [Die 2. Antwort von _Gunnar Bittersmann_](https://forum.selfhtml.org/self/2026/apr/14/popup-durch-bild/1824552#m1824552) kam nämlich grade, als ich noch beim Schreiben war. Da hätte ich wohl doch lieber noch ein bisschen warten sollen. 😶 > @@Player X > > > Wahrscheinlich werde ich die Frage dann wohl doch weglassen > > Möglicherweise eine gute Entscheidung … > > > denn durch den Button würde es in diesem Fall leider nicht mehr so schön aussehen. > > … mit einer völlig falschen Begründundung. > > Die richtige Begründung wäre: Der Zwischenschritt macht für Nutzer keinen Sinn, sondern nervt nur. > > 🖖 Live long and prosper > > {:@en} Naja, mit den ganzen Links wird man einfach nur auf eine andere Seite weitergeleitet, aber der eine Link würde gleich das Spiel starten, und weil da nicht angezeigt wird, dass dadurch das Spiel gestartet wird, weil dort schon ein anderer Text hingehört (außer unten links, wenn der Link durch den Mauszeiger angezeigt wird), wollte ich diese Information noch auf eine andere Art mitteilen. > @@Gunnar Bittersmann > > > Was du tun kannst: Ein Bild in einen Button packen. > > `<input type="image">`{:.language-html} ist auch ein Button. [Codepen](https://codepen.io/gunnarbittersmann/pen/NPReaVy) > > > 🖖 Live long and prosper > > {:@en} Jedenfalls funktioniert es jetzt. Das mit __<input type="image">__ ist genau das Richtige. Vielen Dank! 😊 Ich werde dann mal schauen, ob ich noch die Farben vom Hintergrund und Text davon ändern kann. Im Moment sieht es bei mir so aus. ~~~ html body { font-family: "Motiva Sans", Arial, Helvetica, sans-serif; background-color: #1b2838; } input { height: 96px; width: 96px; padding: 0px; color: currentColor; border: thin solid; } <table> <colgroup> <col width="344" /> <col width="128" /> <col span="3" width="104" /> </colgroup> <tbody class="pin"> <tr style="color:#e39117"> <td><font size="5">x200 Orange Voucher</font></td> <td><input type="image" popovertarget="run" src="https://dl.fruitbatfactory.com/steam_icons/orange_voucher_200.png" title="A ticket that can traded in the Shop for 200 Oranges."/> <div popover="" id="run"> <p>100% Orange Juice starten?</p> <p align="center"><a href="steam://rungameid/282800">Ok!</a></p> </div></td> <td><p align="center"><font color="black">0</font></p></td> <td><p align="center">1</p></td> <td><p align="center"><font color="black">0</font></p></td> </tr> </tbody> </table> ~~~ PS: Ich wusste ja noch gar nicht, dass auf codepen.io unbedingt __px__ hingeschrieben werden muss, damit das mit der Größe funktioniert. Bei mir (Firefox) funktioniert es auch schon ohne __px__. 🤔
nicht angemeldet nicht angemeldet
