Popup durch Bild

[Player X]

Hi,
ich habe mal eine Frage. Und zwar wollte ich mal Bilder verlinken, wobei es bei einem Link besser wäre, wenn sich zuerst noch ein Popup mit einer Frage öffnet, ob man den Link wirklich öffnen will.

Allerdings wird mir hier nur erklärt, wie es mit Buttons gemacht wird, und auf anderen Seiten bin ich leider auch nicht fündig geworden.
Ich habe auch schon probiert, popovertarget="additional-info" in <a> oder <img> unterzubringen, aber das hat leider nicht funktioniert.

Kann mir vielleicht jemand sagen, was ich eingeben muss, damit das Popup durch ein Bild statt einen Button geöffnet wird?
Vielen Dank!

[Gunnar Bittersmann]

@@Player X

Kann mir vielleicht jemand sagen, was ich eingeben muss, damit das Popup durch ein Bild statt einen Button geöffnet wird?

Nichts. Ein Popup wir immer per Button gesteuert.

Was du tun kannst: Ein Bild in einen Button packen.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was du tun kannst: Ein Bild in einen Button packen.

<input type="image"> ist auch ein Button. Codepen

🖖 Live long and prosper

[Player X]

Ach so, das wusste ich nicht. Dankeschön!

Wahrscheinlich werde ich die Frage dann wohl doch weglassen, denn durch den Button würde es in diesem Fall leider nicht mehr so schön aussehen.
Und weil die Seite sowieso nur für interne Zwecke genutzt wird, wird sich auch niemand beschweren, dass durch den Klick im Browser plötzlich ein externes Programm gestartet wird. 😉

[Gunnar Bittersmann]

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

Und gegen „nicht mehr so schön aussehen“ gäbe es ein wundersames Mittel: CSS. Damit lassen sich sogar Buttons stylen: kein Rahmen, kein Hintergrund, …

Und wie gezeigt, ist das mit <input type="image"> nicht einmal notwendig.

🖖 Live long and prosper

[Felix Riesterer]

Liebe(r) Player X,

wobei es bei einem Link besser wäre, wenn sich zuerst noch ein Popup mit einer Frage öffnet,

merke: Es ist niemals besser, wenn sich beim Klick auf einen Link ein Popup öffnet. In aller Regel führt der Link zu einem neuen Dokument. Manchmal zeigt er den Inhalt eingebunden an (Stichwort Lightbox). Aber eine Frage will ich definitiv nicht gestellt bekommen, ob ich mir sicher bin, dass ich diesen Link wirklich öffnen möchte.

Es gibt eine einzige echte Ausnahme für das oben Geschilderte: Wenn die fragliche Seite ein Formular enthält, in dessen Eingabefeldern seit dem Laden Änderungen gemacht wurden, dann ist es sinnvoll und richtig danach zu fragen, ob diese Änderungen durch das Anklicken eines Links verworfen werden sollen, also wie Du schreibst:

ob man den Link wirklich öffnen will.

Du schreibst aber nichts von einem solchen Szenario, weshalb ich den Verdacht hege, dass ein solches Popup von Dir mir ganz schnell auf die Nerven gehen wird, weil es mich für dumm verkauft.

Kann mir vielleicht jemand sagen, was ich eingeben muss, damit das Popup durch ein Bild statt einen Button geöffnet wird?

Diese Frage ist technisch falsch gestellt. Ein Bild kann nichts öffnen. Auch kein Popup. Aber einen Link kannst Du so präparieren, dass der Browser nicht schlicht zum neuen Dokument überleitet. Dazu benötigst Du JavaScript, denn rein mit HTML-Mitteln kannst Du nicht pauschal alle Links im Dokument „abfangen“, weil im Formular Änderungen eingetragen wurden. Und ein Link kann als anklickbaren Bereich auch ein Bild beinhalten.

In JavaScript definierst Du eine Funktion, welche im Falle eines Klick-Ereignisses ausgeführt werden soll. Das macht man, indem man einen EventListener verwendet. Und wenn dann Deine Funktion im Falle eines Klicks im Dokument aufgerufen wird, dann prüfst Du, ob ein Link angeklickt wurde. Das klappt z.B. damit, dass Du das Objekt, welches im Event-Objekt als target definiert ist, mit der browserinternen Liste document.links abgleichst. Wenn dann tatsächlich ein Link angeklickt worden ist, kannst Du prüfen, ob Du auf Deiner Seite ein Formular hast und ob darin noch nicht übertragene Änderungen sind. Wenn ja, kannst Du verhindern, dass der Browser dem Link folgt und dann etwas anderes tun, wie z.B. ein Popup einblenden.

Liebe Grüße

Felix Riesterer

[Player X]

Ups, da habe ich wohl grade zum falschen Zeitpunkt reagiert. Die 2. Antwort von Gunnar Bittersmann 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

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"> ist auch ein Button. Codepen

🖖 Live long and prosper

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

[Felix Riesterer]

Liebe(r) Player X,

<body>

<table>
[...]
</body>
</html>

nö, das kommt mehr als 20 Jahre zu spät. Besser: semantisches HTML + CSS

Liebe Grüße

Felix Riesterer

[Player X]

Hm... Das verstehe ich jetzt irgendwie nicht.
Wie meinst du das denn? 🤔

[Felix Riesterer]

Liebe(r) Player,

Du verwendest eine Tabelle, um Inhalte auf Deiner Seite zu positionieren. Schärfer formuliert: Du missbrauchst eine Tabelle, um das Layout Deiner Seite umzusetzen. Das hat man vor über 20 Jahren so gemacht, weil es noch keine besseren technischen Möglichkeiten gab.

Liebe Grüße

Felix Riesterer

[Player X]

Ach so, jetzt verstehe ich, was du meinst.
Keine Sorge! Da ich die Seite sowieso nur für den privaten Gebrauch geschrieben habe, sollte es doch eigentlich egal sein, auf welche Art ich die Seite erstelle, und da ich sonst auch immer den Texteditor für alles mögliche benutze, möchte ich auch nicht extra ein neues Programm nur für diese eine Datei installieren. 😉

Jedenfalls bin ich froh, dass ich zumindest das Wichtigste hinbekommen habe. Da darf die Seite auch ruhig altmodisch aufgebaut sein. 😅

[EDIT]

Wie wird eine Seite denn heutzutage eigentlich aufgebaut, wenn es keine Tabelle sein darf? 🤔

[Matthias Scharwies]

Herzlich willkommen!

Ach so, jetzt verstehe ich, was du meinst.

Wie wird eine Seite denn heutzutage eigentlich aufgebaut, wenn es keine Tabelle sein darf? 🤔

• HTML/Tutorials/Seitenstrukturierung
• Einstieg_in_HTML

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Player X,

und da ich sonst auch immer den Texteditor für alles mögliche benutze, möchte ich auch nicht extra ein neues Programm nur für diese eine Datei installieren.

Welches Layout-Modell Du für deine HTML Seite benutzt, ist von deinem Texteditor unabhängig.

Ein Table-Layout sollte sich idealerweise durch display:grid ersetzen lassen. Für alles weitere folge Matthias' Links in unser Wiki 😀

Rolf

[Player X]

Ok, dankeschön! Dann schau ich mal, ob ich damit auch zurechtkommen werde.
Falls am Ende beides gleich aussehen sollte, nehme ich dann die Variante, die weniger Platz einnimmt. 😊

[Rolf B]

Hallo Player X,

in a coconutshell:

table

• HTML-gesteuert
• CSS nur für die Deko
• starre Anordnung
• Browser mischt bei Anordnung mehr mit als einem lieb ist
• schlecht zugänglich
• du bist mit der Flexibilität schnell am Ende
• du wirst angenölt, dass dein Markup obsolet ist

grid

• Layout per CSS-gesteuert
• wenig Aufwand im HTML
• responsive Anordnung möglich
• Anordnung an sich besser steuerbar
• für Assistenztechniken zugänglicher
• Grid kann sehr viel und Albträume bescheren, aber einfache Grids sind schnell gelernt
• niemand bei Selfhtml beschimpft Dich deswegen 😉

Rolf

[Tabellenkalk]

Hallo,

• niemand bei Selfhtml beschimpft Dich deswegen 😉

wegen Tablelayout wird man hier auch nicht beschimpft, sondern liebevoll kritisiert… 😀

Gruß
Kalk