Bilder mit Ebenen einbinden Variantenstudie

perle93

Erfahrenes Mitglied
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!
 
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?


Code:
<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
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
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
 
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
 

Anhänge

  • balkone_braun.png
    balkone_braun.png
    205,7 KB · Aufrufe: 6
Beispielsweise Betonfassade zu Holzfassade, das bekomme ich nur mit Bildern, nicht aber mit dem Färben hin.
 
Zurück