# Bilder mit Ebenen einbinden Variantenstudie



## perle93 (14. Juni 2017)

Hallo, ich möchte gerne eine simple Seite erstellen auf der eine Hausfassade abgebildet ist und ich die Fassade in verschiedenen Varianten zeigen möchte, sprich, das Hintergrundbild (derzeitiger Zustand des Gebäudes) dann die Auswahl zwischen Fassade und Balkonen unabhängig von einander. Ich wähle Balkon rot und Fassade grün, dann möchte ich die gelben Balkone sehen, ohne erneut die Fassade einstellen zu müssen, geht das irgendwie clever und einfach?

Vielen Dank für die Hilfe vorab!


----------



## MrMurphy (14. Juni 2017)

Hallo



> clever



Grundsätzlich ja.



> einfach



Grundsätzlich nein.

Ohne die Ausgangslage und die Grafiken zu kennen läßt sich kaum mehr sagen.

Wenn du aktuelles HTML und CSS verwendest könnte ich mir den Checkbox-Hack als Lösung vorstellen.

Gruss

MrMurphy


----------



## perle93 (14. Juni 2017)

Hallo MrMurphy,

vielen Dank für die Antwort, gerne möchte ich transparente Bilder (png) von Balkonen- und Fassadenvarianten über das Ursprungsbild legen. Mit den Haken finde ich spannend und realisierbar für mein nicht technisch ausgereiftes Halbwissen im Bereich html.

Also müsste ich Bilder hochladen mit den Varianten und diese mit der Checkbox verknüpfen, um dann zu sagen du bist an, du aus, richtig?



```
<p>Fassaden:</p>
  <fieldset>
    <input type="radio" id="mc" name="Zahlmethode" value="Mastercard">
    <label for="bo"> beton optik</label><br>
    <input type="radio" id="vi" name="Zahlmethode" value="Visa">
    <label for="fv"> farblicher verputz</label><br>
    <input type="radio" id="ae" name="Zahlmethode" value="AmericanExpress">
    <label for="hl"> holzlattung</label>
  </fieldset>
</form>

<form>
  <p>Balkone:</p>
  <fieldset>
    <input type="radio" id="mc" name="Zahlmethode" value="Mastercard">
    <label for="bb"> betonbrüstung</label><br>
    <input type="radio" id="vi" name="Zahlmethode" value="Visa">
    <label for="hb"> holzbrüstung</label><br>
    <input type="radio" id="ae" name="Zahlmethode" value="AmericanExpress">
    <label for="vb"> verputzebrüstung</label>
  </fieldset>
</form>
```


das wäre nun der Start für mich, wie steuere ich nun die Bilder an?

lg Björn


----------



## MrMurphy (14. Juni 2017)

Hallo

Ohne die Bilder kann ich dir nicht konkret helfen. Deshalb zwei Links mit Erläuterungen zum Checkbox-Hack. Für die Bilder werden noch Anpassungen erforderlich sein:

http://www.olivergast.de/blog/2013/04/16/css3-der-checkbox-hack/

und

http://www.thestorff.de/checkbox-hack-mod.php

Über die Suchmaschine deiner Wahl findest du natürlich noch mehr.

Gruss

MrMurphy


----------



## Sempervivum (14. Juni 2017)

Wenn es nur um die Farben geht, könnte dir dies vielleicht weiter helfen:
http://ulrichbangert.de/div/webentwicklung/javascript/canvas_colorize_7.html
Man kann dort Bereiche in einem Bild, in deinem Fall Fassade und Balkone, unterschiedlich einfärben.
Die Anwendung des Skripts ist einfach, aber die Vorbereitung der Bilder erfordert etwas Geschick mit dem Freistellen. Das gilt aber für andere Lösungen auch.
Edit: Hier noch eine Variante, die deinem Anwendungsfall näher kommt;
http://ulrichbangert.de/div/webentwicklung/javascript/canvas_colorize_roof_5.html


----------



## Jan-Frederik Stieler (15. Juni 2017)

HI,
also im Grunde brauchst Du nur CSS. Mit de mAttribut :checked kannst Du die Checkbox abfragen und dann setzt Du das jeweilige Bild auf display: block; oder ähnliches.
Jetzt geht es eigentlich nur darum das HTML-Konstrukt so zu bauen das es auch funktioniert. Wenn Du jetzt auf Zugänglichkeit verzichten kannst könntest Du in das Labelelement das Bild welches ein- und ausgeblendet wird reinlegen.
Zur Not kannst Du heir auch noch ein Text definieren welcher nur von Screenreadern gelesen werden kann.

Grüße


----------



## perle93 (15. Juni 2017)

Hallo an alle, vielen Dank erstmal für die ganzen Hinweise.

Bei den Einfärbungen ist es sehr gut, allerdings müsste ich das Material ändern, dann bringt das Einfärben weniger den Effekt den ich suche.

Anbei ein Beispiel der Balkone  als Bild, wenn es hilft, dann speichere ich das mal ab. Ziel ist es ausgeschnittene png Files (Fassade und Balkone) mittels Knopfdruck zu aktivieren und auf die vorhandene Fassade zu legen, ohne das mir die Fassade geändert wird, wenn der Balkon sich ändert und andersrum.
Das Thema von Oliver Gast klingt spannend, ich versuche mich mal daran, weitere Tipps sind aber weiterhin gern gesehen ,-)

vielen Dank


----------



## Sempervivum (15. Juni 2017)

> allerdings müsste ich das Material ändern, dann bringt das Einfärben weniger den Effekt den ich suche.


Wie meinst Du das?


----------



## perle93 (15. Juni 2017)

Beispielsweise Betonfassade zu Holzfassade, das bekomme ich nur mit Bildern, nicht aber mit dem Färben hin.


----------



## Sempervivum (15. Juni 2017)

Ah, verstehe, das ist natürlich ein Argument.


----------



## perle93 (15. Juni 2017)

ja, denke ich auch ,-)


----------



## Sempervivum (16. Juni 2017)

Schau mal, ich habe da etwas ausgearbeitet:
http://ulrichbangert.de/div/webentwicklung/javascript/canvas_colorize_8.html


----------

