Beispiel....die PHP-Datei, welche das Bild aus den Einzelteilen zusammensetzt und als einzelnes Bild ausgibt...
(auf den Javascript-Teil gehe ich nicht weiter ein, der funktioniert bei dir ja)
image.php
PHP:
<?php
//Das Ergebnis wird ein PNG werden
header ("Content-type: image/png");
//Pfad zu den Grafik-Verzeichnissen
$bildVerzeichnis='images/';
//das Bild, welches im Normalzustand angezeigt werden soll (hier 'haus.png')
$bildBasis=$bildVerzeichnis.'haus.png';
//Bildobjekt erzeugen aus dem Standardbild
$bild=ImageCreateFromPng($bildBasis);
//welche Einzelteile sollen dort hineinkopiert werden?
$layers=array('fassade','dach','fenster');
//Grösse des Bildes
$bildGroesse=GetImageSize($bildBasis);
//Array mit den hineinzukopierenden Einzelteilen durchlaufen
foreach($layers as $k=>$value)
{
//fehlt ein Parameter in der URL oder ist das entsprechende Einzelteil nicht vorhanden
// ~~> Standardbild anzeigen ~~> Ende
if(!isset($_GET[$value])||!is_file($bildVerzeichnis.$value.'/'.$_GET[$value].'.png'))
{
die(readfile($bildBasis));
}
//Bildobjekt erzeugen vom Einzelteil
$layer=ImageCreateFromPng($bildVerzeichnis.$value.'/'.$_GET[$value].'.png');
//Einzelteil in Standardbild hineinkopieren
imageCopy($bild,$layer, 0, 0, 0, 0, $bildGroesse[0],$bildGroesse[1]);
}
//Bild an Browser ausgeben
imagePNG($bild);
?>
Dieses Skript erwartet die Parameter, nach denen das Bild zusammengesetzt wird, in der URL.
Du kannst es also über dein Javascript als img-Src einbinden, bspw.:
Code:
image.php?fassade=magenta&dach=indigo&fenster=chartreuse
....würde eine Villa Kunterbunt ergeben:suspekt:
Die Bilder sind im Haupt-Grafik-Verzeichnis(hier:images)in Unterverzeichnissen abgelegt.
Die Namen dieser Unterverzeichnisse sind identisch mit den Namen der Einzelteile(fassade,dach,fenster)
Die Bilder sind transparente PNG-Grafiken(leider funktioniert die PHP-Grafikbibliothek aus Lizensgründen nicht mehr mit GIFs)...
jeweils mit den farbigen Einzelteilen. Der Name der Bilder ergibt sich aus ihrer Farbe.
Für den oben notierten Aufruf werden also in das Standard-Bild folgende Einzelteile eingefügt:
- [images/fassade/magenta.png]
~~>Fassade in magenta
- [images/dach/indigo.png]
~~>blaues Dach
- [images/fenster/chartreuse.png]
~~>grüne Fenster
Alle Bilder sind gleich gross...aber ich schätze, das hast du ohnehin so... wär sonst recht nervig mit der Positionierung der Einzelteile.
Wenns fertig ist, siehts dann
so aus(man möge mir meine grafisches Unvermögen verzeihen
)
