Javascript/HTML - Funktionierenden Button hinter Bild?

5 Antworten

tom1stein
04.01.2019, 06:23

Du brauchst keinen Button, denn der soll ja offenbar unsichtbar sein. Du willst bei Klick auf ein Bild etwas auslösen. Image Maps sind dafür geschaffen, aber Du kannst auch über über ein Javascript-Event o.ä. (wenn der Client das denn erlaubt!) die Aktion auslösen, die sonst der Button auslöst.
Woher ich das weiß:Hobby
tavkomann
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, JavaScript
04.01.2019, 01:14
Was du versuchst
Wie packe ich einen Button so hinter ein Bild ,dass er noch funktioniert?

Du willst quasi einen Button unter einem Bild positionieren. Das funktioniert folgendermaßen:

<div class="wrapper">
  <button onclick="alert('Klick');"></button>
  <img src="bild.jpg" alt="Bild" />
</div>
.wrapper, .wrapper > img {
  position: relative;
}

.wrapper > button {
  position: absolute;
}

.wrapper > img {
  position: relative;
}

Damit der Button nun auch anklickbar wird, musst du mit pointer-events arbeiten:

.wrapper > img {
  pointer-events: none;
}

Live-Beispiel: https://jsfiddle.net/vgmraycu/

Was du als Alternative vorschlägst
Oder auch über das Bild ,so dass er dann hidden wäre , aber noch funktioniert?

Nun soll das Bild oben sein. Das funktioniert folgendermaßen:

<div class="wrapper">
  <img src="bild.jpg" alt="Bild" />
  <button onclick="alert('Klick');"></button>
</div>
.wrapper, .wrapper > img {
  position: relative;
}

.wrapper > button {
  position: absolute;
  left: 0;
}

Damit der Button unsichtbar wird, aber trotzdem funktioniert, eignet sich beispielsweise opacity:

.wrapper > button {
  opacity: 0;
}

Live-Beispiel: https://jsfiddle.net/aduefrwc/

Was die bessere Alternative ist

Es gibt genau für deinen Einsatzzweck sogenannte Maps. Dies funktioniert so:

<img src="bild.jpg" alt="Bild" usemap="#map" />

<map name="map">
  <area shape="rect" coords="0,0,82,126" href="javascript: alert('Rechteck')" alt="Rechteck" />
  <area shape="circle" coords="500,50,100" href="javascript: alert('Kreis')" alt="Kreis" />
</map>

Dabei kannst du sogar verschiedene Formen ganz einfach definieren.

Live-Beispiel: https://jsfiddle.net/dc9ry5hv/

Diese Maps sind unsichtbar. Möchtest du CSS-Styles anwenden, kannst du dir Folgendes, was ich irgendwann mal gemacht habe, ansehen: https://jsfiddle.net/g2yc7ukw/

Das hat auch den Vorteil, dass die Map responsive ist. Ebenso kann SVG genutzt werden: https://www.mediaevent.de/tutorial/svg-area-map.html

Für deinen Zweck sollten die HTML-Image-Maps wahrscheinlich vollkommen ausreichen.
Ceeesy759
03.01.2019, 19:13

Wenn ich Dich richtig verstehe, möchtest Du einen unsichtbaren Button haben, richtig?

HTML:
<button>button</button>

CSS:
button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

[Quelle]
Bekky13 
Fragesteller
 03.01.2019, 19:33

danke ,den Button sieht man nun nicht mehr...aber den Text im Button ist sichtbar...und wenn ich den weg mache , ist der Button nicht mehr click-bar

0
Ceeesy759  03.01.2019, 19:37
@Bekky13

Versuchs mal mit "&nbsp;". Dies erzeugt ein geschütztes Leerzeichen.

Ansonsten dem button eine Mindesthöhe und -breite per CSS zuweisen.

HTML:
<button>&nbsp;</button>
1
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, JavaScript
04.01.2019, 12:00 
<!doctype html>
<title>Bild als Button</title>
<style>
button {
  border:none;
  padding:0
}
</style>
<button><img src="bild.jpg" alt="Klick mich"></button>

Alex