Bonjour à tous,
Je suis actuellement bloqué et j'aurais besoin de votre aide.
Je travaille sur (encore) une génération d'avatars mais cette fois ci, mon avatar est complet !
En fonction de l'avatar que l'on a choisit, on a donc plusieurs possibilités pour le personnaliser : - via une palette de couleur
- via un glisser-deposer
aaa.png
Comme on peut le voir sur cette image, chaque url contient les paramètres de l'avatar.
Le problème ?
On m'a demander de générer une centaine d'avatars différents en utilisant l'url mais cela ne fonctionne pas
En fait, pour être plus précis je ne voit pas comment faire, j'avais une idée mais il s'avère qu'elle ne fonctionne pas (voir ci-dessous):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<body >
<?php
$couleurs = array("couleur1","couleur2","couleur3"); // couleurs dans un tableau
$couleur_aleat = $couleurs[rand(0,3)]; //choix aleatoire de couleur
// mauvaise idee
echo 'Image:<br> <img src="http://localhost/davy/Projet%202/index.php?peau='.$couleur_aleat.'&yeux='.$couleur_aleat.'&tshirt='.$couleur_aleat.'&cravate='.$couleur_aleat.'&col=.'.$couleur_aleat.'" title="image aleatoire">';
// ne fonctionne pas :
echo 'Image:<br> <img src="http://localhost/davy/Projet%202/index.php?peau=Indianred&yeux=Chocolate&tshirt=Orange&cravate=Gold&col=Hotpink" title="image aleatoire">';
?>
</body>
</html>
Le problème avec l'idée que j'avais était : - on doit rentrer les couleurs dans un tableau (vive le temps perdu)
- la même couleur apparaitra pour chaque paramétrè
Je vous met mes pages ci dessous car tout ne rentrera pas en fichier joints :
index.php (php conceptuel):
<?php
include_once("std.php") ;
$js1 = "//code.jquery.com/jquery-1.10.2.js";
$js2 = "//code.jquery.com/ui/1.10.4/jquery-ui.js";
$js3 = "avatar.js";
debutPage("Avatar","strict","avatar.css","$js1 $js2 $js3","http://localhost/davy/img/personne0.png") ;
// titre
h2(" Creez votre avatar :") ;
center ();
table ();
tr();
td();
center();
form("index.php","get",'name="choix-avatar"');
h4("Choix avatar :");
input_select("choix") ;
input_option("1","basique");
input_option("2","homme") ;
input_option("3","femme") ;
input_submit("Changer avatar"); br();br();
input_select_fin() ;
finform();
fincenter();
// choix
/* si option=1 alors include image.php sinon si opt=2 include imageh.php sinon si opt=3 include imagef.php ET si opt=NULL afficher image.php (voir empty)*/
$choix= !empty($_GET['choix']) ? $_GET['choix'] : 1;
if($choix==1)
{
include('image.php');
}
else if($choix==2)
{
include('homme.php');
}
else if ($choix=3)
{echo '3';
}
/* L'image est ici */
fintd();
td(); /* Suite du formulaire */
center();
fincenter();
if ($choix==1) {
$peau=!empty($_GET['peau']) ? $_GET['peau'] : NULL;
$yeux=!empty($_GET['yeux']) ? $_GET['yeux'] : NULL;
$tshirt=!empty($_GET['tshirt']) ? $_GET['tshirt'] : NULL;
$cravate=!empty($_GET['cravate']) ? $_GET['cravate'] : NULL;
$col=!empty($_GET['col']) ? $_GET['col'] : NULL;
center();
form("index.php","get",'name="base"');
echo ("Peau:"); br();
input_text('peau',''.$peau.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'peau\')');br(); br();
echo ("Yeux:"); br();
input_text('yeux',''.$yeux.'','Couleur des yeux');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'yeux\')'); br(); br();
echo ("T-shirt:"); br();
input_text('tshirt',''.$tshirt.'','Couleur du t-shirt');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'tshirt\')'); br(); br();
echo ("Cravate:"); br();
input_text('cravate',''.$cravate.'','Couleur de la cravate');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'cravate\')');br(); br();
echo ("Col:"); br();
input_text('col',''.$col.'','Couleur du col');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'col\')'); br(); br();
span("ps") ; echo ("PS: Vous pouvez aussi deplacer les couleurs."); br();
echo("La couleur par default est le noir.");
finspan() ; br(); br();
input_submit("Appliquer les couleurs"); br();br();
span("download");
echo("Pour telecharger l'avatar c'est ici --> "); adownload('image.svg',"Telecharger","Votre Avatar");
}
else if ($choix==2)
{
$peau=!empty($_GET['peau']) ? $_GET['peau'] : NULL;
$yeux=!empty($_GET['yeux']) ? $_GET['yeux'] : NULL;
$veste=!empty($_GET['veste']) ? $_GET['veste'] : NULL;
$cravate=!empty($_GET['cravate']) ? $_GET['cravate'] : NULL;
$col=!empty($_GET['col']) ? $_GET['col'] : NULL;
$cheveux=!empty($_GET['cheveux']) ? $_GET['cheveux'] : NULL;
$chemise=!empty($_GET['chemise']) ? $_GET['chemise'] : NULL;
center();
form("index.php","get",'name="homme"');
echo ("Peau:"); br();
input_text('peau',''.$peau.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'peau\')');br(); br();
echo ("Cheveux:"); br();
input_text('cheveux',''.$cheveux.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'cheveux\')');br(); br();
echo ("Yeux:"); br();
input_text('yeux',''.$yeux.'','Couleur des yeux');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'yeux\')'); br(); br();
echo ("Chemise:"); br();
input_text('chemise',''.$chemise.'','Couleur de la veste');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'chemise\')'); br(); br();
echo ("Veste:"); br();
input_text('veste',''.$veste.'','Couleur de la veste');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'veste\')'); br(); br();
echo ("Cravate:"); br();
input_text('cravate',''.$cravate.'','Couleur de la cravate');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'cravate\')');br(); br();
echo ("Col:"); br();
input_text('col',''.$col.'','Couleur du col');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'col\')'); br(); br();
span("ps") ; echo ("PS: Vous pouvez aussi deplacer les couleurs."); br();
echo("La couleur par default est le noir.");
finspan() ; br(); br();
input_submit("Appliquer les couleurs"); br();br();
span("download");
echo("Pour telecharger l'avatar c'est ici --> "); adownload('image.svg',"Telecharger","Votre Avatar");
}
finspan();
finform();
fincenter();
fintd();
td();
center();
echo ("Couleurs a faire glisser:"); br();br();
ul();
li1('class="draggable Aqua"',"Aqua");finli();
li1('class="draggable DeepSkyBlue"',"DeepSkyBlue");finli();
li1('class="draggable Yellowgreen"',"Yellowgreen");finli();
li1('class="draggable Indianred"',"Indianred");finli();
li1('class="draggable Orange"',"Orange");finli();
li1('class="draggable Yellow"',"Yellow");finli();
li1('class="draggable Gold"',"Gold");finli();
li1('class="draggable Peru"',"Peru");finli();
li1('class="draggable Chocolate"',"Chocolate");finli();
li1('class="draggable Darkmagenta"',"Darkmagenta");finli();
li1('class="draggable Hotpink"',"Hotpink");finli();
li1('class="draggable Cornsilk"',"Cornsilk");finli();
finul();br();
echo img("img/attention.png"); br();
span("attention");
echo('Les couleurs doivent etre placees'); br(); echo('sur la zone de texte');
finspan();
fincenter();
fintd();
fintr();
fintable();
fincenter();
finPageMinimale();
?>
image.php
<?php
// On recupere les informations du formulaire et on test
if(isset($_GET['cravate']))
$coul_cravate=$_GET['cravate']; //si couleur personnalisée
else
$coul_cravate='white'; //sinon blanc par defaut
if(isset($_GET['col']))
$coul_col=$_GET['col']; //si couleur personnalisée
else
$coul_col='white'; //sinon blanc par defaut
if(isset($_GET['tshirt']))
$coul_tshirt=$_GET['tshirt']; //si couleur personnalisée
else
$coul_tshirt='white'; //sinon blanc par defaut
if(isset($_GET['yeux']))
$coul_yeux=$_GET['yeux']; //si couleur personnalisée
else
$coul_yeux='white'; //sinon blanc par defaut
if(isset($_GET['peau']))
$coul_peau=$_GET['peau']; //si couleur personnalisée
else
$coul_peau='white'; //sinon blanc par defaut
// Fin des tests
$svg='<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="349"
id="svg5537"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="image.svg">
<metadata
id="metadata5550">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="767"
inkscape:window-height="848"
id="namedview5548"
showgrid="false"
inkscape:zoom="0.60933961"
inkscape:cx="176.34349"
inkscape:cy="165.00446"
inkscape:window-x="832"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="svg5537" />
<desc
id="desc5539">Avatar</desc>
<defs
id="defs5541">
<g
id="tete">
<circle
cx="176"
cy="194"
r="130"
stroke="black"
fill="blue"
id="circle5544"
d="M 306,194 C 306,265.79702 247.79702,324 176,324 104.20298,324 46,265.79702 46,194 46,122.20298 104.20298,64 176,64 c 71.79702,0 130,58.20298 130,130 z" />
</g>
<!-- Début de la création de l avatar -->
</defs>
<!-- Peau -->
<path
sodipodi:type="arc"
style="fill:'.$coul_peau.';fill-opacity:0.69406391000000001;fill-rule:evenodd;stroke:#000000;stroke-width:1.44141793000000007;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.80365295000000003;stroke-dasharray:none;opacity:1"
id="peau"
sodipodi:cx="190.85249"
sodipodi:cy="183.88043"
sodipodi:rx="92.924431"
sodipodi:ry="95.06884"
d="m 283.77692,183.88043 a 92.924431,95.06884 0 1 1 -185.848858,0 92.924431,95.06884 0 1 1 185.848858,0 z"
transform="matrix(1.403424,0,0,1.3718014,-92.347035,-96.748451)"
inkscape:label="#peau" />
<!-- Oeil gauche -->
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-0.20299212,-37.77583)"
inkscape:label="#yeux" />
<!-- Pupille gauche -->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none"
id="pupilleG"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-5.2469634,-64.300067)"
inkscape:label="#pupille" />
<!-- Oeil droit -->
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-80.191992,-38.65833)"
inkscape:label="#yeux" />
<!-- Pupille droite-->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:0.80365293999999998"
id="pupilleD"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-85.246963,-64.300067)"
inkscape:label="#pupille" />
<!-- Tshirt -->
<path
style="fill:'.$coul_tshirt.';stroke:#000000;stroke-width:1.01100004000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 47.760189,182.27438 21.040317,14.608 15.83466,10.29199 16.164554,6.308 24.08188,4.98 43.21543,1.66 33.50087,-1.45151 24.22967,-6.18448 29.03022,-7.30401 32.65898,-13.94399 16.18675,-8.99102 c -0.74326,6.45035 -3.7249,13.47381 -6.10867,20.47099 -6.54343,20.38073 -27.72227,44.29602 -28.22196,44.29602 -6.36368,6.7901 -14.23989,12.90796 -23.09221,18.592 -0.60411,0.96519 -11.44887,7.50172 -20.06175,10.91301 -7.22374,2.65878 -12.98701,4.34391 -19.10969,6.26864 l -14.01322,1.62717 -22.98338,1.83842 -16.68994,-1.78499 c -5.11309,-0.97544 -9.90906,-1.63376 -16.33521,-3.92226 -4.8345,-1.6283 -9.70753,-3.29139 -15.50478,-5.78897 l -12.4135,-6.66059 c -3.13865,-1.73147 -7.6679,-4.85355 -11.546104,-7.32457 -3.941309,-3.12329 -7.915752,-6.28918 -13.751522,-11.8482 -5.73455,-5.05673 -10.534986,-11.67031 -15.474857,-18.05151 -4.469168,-5.97149 -7.806071,-12.50912 -11.200401,-19.01804 -4.177309,-9.74537 -7.735413,-19.55955 -9.436137,-29.5801 z"
id="tshirt"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<!-- Bas de cravate -->
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 185.985,327.248 c 15.73547,-18.51232 27.30568,-27.30568 27.30568,-27.30568 l -11.57021,-29.15692 -4.16527,-19.66934 -6.71072,-6.47932 -12.72722,0 -7.17353,3.70247 -18.74373,53.45434 4.62808,2.77685 z"
id="bas_cravate"
inkscape:connector-curvature="0"/>
<!-- Haut de cravate -->
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 162.39041,220.28175 -9.09541,13.0573 17.23488,14.64449 7.39473,-4.20153 11.62517,0 8.03791,6.45771 11.07467,-19.46215 c 0,0 -4.66545,-11.63575 -7.621,-11.63575 -2.95555,0 -38.65095,1.13993 -38.65095,1.13993 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsc"
inkscape:label="#cravate"/>
<!-- Col gauche -->
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 201.76163,218.75624 23.45612,-5.68637 28.74795,-7.58344 -11.03034,15.39318 -13.90223,13.4572 -13.32111,10.16172 -3.84904,2.56147 -2.82752,-16.32299 c -2.01552,-4.09821 -3.77811,-8.30482 -7.10179,-11.84239"
id="col_gauche"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- Col droit -->
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 96.62283,212.30707 c 9.54031,3.18301 19.46731,4.43255 29.25939,6.35672 l 36.18364,1.61483 -8.86926,13.04323 -2.55044,14.52495 -9.49997,-2.74074 -19.55364,-9.91058 -14.13532,-10.75701 z"
id="col_droit"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- bouche -->
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 167.30292,195.69684 4.11856,2.76909 c 7.2984,1.73982 16.33913,1.89412 20.79268,1.22451 l 9.74803,-2.01266 c 3.69991,-1.3347 7.16678,-1.97031 11.11672,-4.05512 4.11354,-3.25621 6.79585,-6.75096 10.16326,-10.13153 l 1.77334,-3.15259"
id="path6441"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</svg>';
echo $svg; // Permet de l'afficher en html
$fichier_desti = fopen("image.svg", 'w'); //si le fichier n'existe pas, il est créé avec l'option w
fputs($fichier_desti,$svg);//ecrit le svg dans le fichier
fclose($fichier_desti);
?>
homme.php
<?php
// On recupere les informations du formulaire et on test
if(isset($_GET['cravate']))
$coul_cravate=$_GET['cravate']; //si couleur personnalisée
else
$coul_cravate='white'; //sinon blanc par defaut
if(isset($_GET['col']))
$coul_col=$_GET['col']; //si couleur personnalisée
else
$coul_col='white'; //sinon blanc par defaut
if(isset($_GET['veste']))
$coul_veste=$_GET['veste']; //si couleur personnalisée
else
$coul_veste='white'; //sinon blanc par defaut
if(isset($_GET['cheveux']))
$coul_cheveux=$_GET['cheveux']; //si couleur personnalisée
else
$coul_cheveux='white'; //sinon blanc par defaut
if(isset($_GET['yeux']))
$coul_yeux=$_GET['yeux']; //si couleur personnalisée
else
$coul_yeux='white'; //sinon blanc par defaut
if(isset($_GET['peau']))
$coul_peau=$_GET['peau']; //si couleur personnalisée
else
$coul_peau='white'; //sinon blanc par defaut
if(isset($_GET['chemise']))
$coul_chemise=$_GET['chemise']; //si couleur personnalisée
else
$coul_chemise='white'; //sinon blanc par defaut
$svg='<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="349"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="homme.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8963756"
inkscape:cx="269.88217"
inkscape:cy="173.42802"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1535"
inkscape:window-height="876"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:'.$coul_peau.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 159.85525,170.27637 c 6.43125,2.85605 11.90907,2.44581 18.2857,1.13613 3.64996,-1.33798 5.22587,-2.67595 7.35887,-4.01393 6.86126,-5.14535 10.04711,-10.94196 13.76235,-15.77409 l 6.68989,-14.69662 3.18537,-8.77664 3.56794,-1.11498 c 2.13423,-2.32275 3.86858,-4.92857 5.04675,-7.58188 1.32185,-3.44104 1.46621,-7.47081 1.86614,-11.37281 -0.3011,-2.32028 -0.99942,-3.7137 -1.78397,-4.90592 l -2.45296,-0.89198 -6.0209,8.02787 0.44599,-18.954691 -4.90592,-7.358875 -4.01393,-0.66899 -7.13588,3.12195 -18.0627,0 -13.37978,-4.90592 -7.58188,-5.12891 -2.89895,-3.79094 -7.80487,0.44599 -10.25783,10.70382 -2.67596,9.365845 -0.66899,15.832741 -4.23693,-6.68989 -1.56097,0 c -0.99506,1.50689 -2.21622,2.75537 -2.45296,5.12891 -0.12517,2.97798 0.22488,6.05101 0.66899,9.14285 0.89914,3.26847 2.8791,6.21269 4.90592,9.14285 l 4.01393,1.78397 5.12891,13.82577 7.13589,12.71079 7.80487,9.58884 c 2.24671,2.30429 4.8075,4.36445 8.02787,6.66874 z"
id="peau"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccccc" />
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.44400001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="367.87357"
sodipodi:cy="278.37762"
sodipodi:rx="7.940959"
sodipodi:ry="7.3367553"
d="m 375.81452,278.37762 a 7.940959,7.3367553 0 1 1 -15.88191,0 7.940959,7.3367553 0 1 1 15.88191,0 z"
transform="matrix(0.80470594,0,0,0.87181193,-106.10792,-136.85199)"
inkscape:label="#yeux" />
<path
sodipodi:type="arc"
style="fill:#280b0b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.01100004;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="pupille_G"
sodipodi:cx="333.24432"
sodipodi:cy="278.08792"
sodipodi:rx="6.1033759"
sodipodi:ry="5.4930382"
d="m 339.3477,278.08792 a 6.1033759,5.4930382 0 1 1 -12.20675,0 6.1033759,5.4930382 0 1 1 12.20675,0 z"
transform="matrix(0.34294774,0,0,0.40215852,75.718298,-6.0330761)"
inkscape:label="#pupille" />
<path
style="fill:'.$coul_cheveux.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 126.16601,102.07399 -1.01405,-25.632656 c 0.22114,-5.40097 1.10569,-9.97475 4.16027,-14.53331 1.06361,-2.8406 4.52108,-5.6516 7.76716,-6.9388 l 6.7691,-3.94895 c 3.94427,-2.24204 7.52083,-3.71849 13.71772,-5.2658 13.64612,-2.44855 23.40497,-1.65456 30.99649,0.44599 7.32827,2.60381 13.11345,5.78628 17.8397,9.36585 4.49904,3.88036 6.62774,8.77658 8.91985,13.60277 1.36928,5.91332 1.93813,9.82557 2.00697,12.48779 l 0,20.515656 -1.56097,-0.22299 -6.4669,8.25086 0.446,-19.623681 -4.76272,-6.544295 -4.33786,-0.5094 -6.69227,2.83792 -18.51107,0.061 -12.95493,-4.82613 -7.37525,-4.84488 -3.18297,-4.29558 c -2.59677,0.25773 -5.41274,0.3199 -7.70395,0.42485 l -4.49982,4.53972 -5.57491,6.38768 -2.89895,8.330065 -0.87323,16.642551 z"
id="cheveux"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<path
style="fill:'.$coul_peau.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 199.59959,150.82652 -0.84161,21.60161 -7.35888,7.13588 -13.37978,7.35888 -3.79094,1.33797 -1.11498,3.34495 -5.57491,0.66899 -2.22996,-3.12195 -16.27873,-9.14285 -9.14285,-9.14285 -0.93188,-25.8701 5.00924,8.93875 c 3.0005,3.79764 3.84798,4.99662 8.02786,9.76957 2.48325,2.23944 4.78539,4.34228 7.89642,6.51854 6.0209,2.89342 11.88921,2.76535 18.0627,1.56098 l 7.46285,-4.205 c 5.96174,-4.99546 10.40256,-10.69677 14.18545,-16.75337 z"
id="cou"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="#peau" />
<path
style="fill:'.$coul_chemise.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 199.00748,166.07808 4.63553,3.12323 -0.30517,9.98318 -7.80488,34.78743 -24.60938,67.84952 -24.6728,-64.28158 -5.35191,-19.17768 -4.45993,-19.17769 0.223,-10.42917 3.07158,-2.22395 0.28779,4.00663 9.57441,10.20747 15.60975,8.47386 2.67595,3.086 5.62528,-0.75531 1.06461,-2.77669 4.61103,-2.25149 12.24326,-7.06398 7.43078,-7.60341 z"
id="path3108"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccc" />
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 165.47663,189.36081 -4.75482,0.19416 -7.12877,10.17152 -2.58243,5.94179 9.60101,1.78328 -3.45778,37.54525 13.60991,36.56932 12.71079,-36.79439 -4.90591,-37.24038 10.03483,-2.45296 -2.40259,-5.74033 -1.87059,-3.56764 -4.20072,-4.05739 -5.71159,-3.16501 -1.18687,3.11464 -5.45986,0.69773 z"
id="bas_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="#cravate" />
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 160.89073,189.55973 -3.79785,5.00626 -3.10733,3.97048 -2.9347,7.07781 8.63147,1.38103 9.90272,2.54936 8.74127,-2.03147 10.18515,-2.58944 -2.41682,-5.69677 -2.07155,-3.27997 -4.14311,-3.97048 -5.52415,-3.15049 -0.77683,2.76207 -5.91256,0.81999 -2.11471,-2.84838 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccc"
inkscape:label="#cravate" />
<path
style="fill:'.$coul_veste.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 136.43968,169.00465 -15.83274,13.89856 -27.651542,5.5749 -12.71079,19.40068 -11.81881,46.38323 -1.78397,17.17072 14.04877,9.58884 15.38674,6.46689 14.940762,0 15.60974,6.68989 27.42854,3.56794 43.70728,-1.33797 24.52959,-4.90592 8.91985,-5.79791 10.92682,1.33798 19.62368,-6.24389 11.8188,-8.69686 -7.80487,-43.93027 -9.36584,-26.53656 -9.14285,-12.2648 -28.54353,-6.0209 -2.00697,-4.23693 -10.09381,-7.5442 c -1.05267,-0.81097 -3.22773,-2.81037 -3.04183,-2.30992 l -0.0211,11.1921 -7.58187,32.33446 -25.19859,69.10295 -24.97558,-65.08902 -6.63823,-25.7455 -2.68772,-11.8188 z"
id="veste"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccc" />
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 174.73923,188.67789 5.57491,-2.87723 11.26496,-6.25121 6.89135,-6.99919 0.71937,-5.94901 4.55334,2.47448 -0.17263,10.26515 -4.86996,20.78902 c -1.14994,4.3213 -1.44065,8.39555 -4.52472,10.47372 -3.12606,-2.36931 -5.84253,-8.0098 -8.0494,-12.87631 l -4.60372,-5.07144 -5.85557,-3.57505 z"
id="colG"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc"
inkscape:label="#col" />
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 139.57601,166.84786 -2.94932,2.14345 -0.22299,8.91274 5.35191,23.63761 c 1.00019,3.42506 0.96189,7.8615 4.23693,9.14285 3.59917,-3.63661 6.63403,-7.64944 8.17166,-12.66042 l 6.76909,-8.30123 4.45993,0.223 -0.223,-1.56098 -14.71775,-7.35888 -10.32973,-9.98446 z"
id="colD"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc"
inkscape:label="#col" />
<path
style="fill:'.$coul_veste.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 136.59652,169.38866 -15.76822,13.87603 -0.31536,32.48254 9.46093,0.31536 0.14274,0.27873 -8.80031,7.77127 1.40419,14.65624 c 2.226,6.94783 0.59129,7.33728 10.25755,26.72977 9.61443,19.07118 13.66774,21.11374 19.61913,31.9579 l 37.99994,-1.06567 c 7.32115,-11.18023 11.83116,-20.33797 17.42125,-33.93978 7.3421,-18.77975 8.06263,-23.78099 11.43606,-33.77388 l -0.86315,-6.30729 -9.46093,-5.99193 10.09166,-1.57682 0,-30.59035 -2.20755,-4.73046 -13.53078,-10.63945 -0.0299,11.90091 -7.25338,30.7196 c -8.94714,23.83691 -17.5436,45.82211 -24.71126,70.99362 l -26.69314,-67.65387 -1.89219,-7.88411 -5.99192,-24.91379 z"
id="haut_veste"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccc"
inkscape:label="#veste" />
<path
style="fill:none;stroke:#000000;stroke-width:1.14024198px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 172.52183,114.83846 2.14087,14.57938 -2.69061,3.39463 -2.39068,-0.20946"
id="path3870"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 155.29289,146.79736 c 13.58927,7.70109 23.23587,7.3935 32.22583,-0.48827"
id="path3874"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.44400001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="367.87357"
sodipodi:cy="278.37762"
sodipodi:rx="7.940959"
sodipodi:ry="7.3367553"
d="m 375.81452,278.37762 a 7.940959,7.3367553 0 1 1 -15.88191,0 7.940959,7.3367553 0 1 1 15.88191,0 z"
transform="matrix(0.80470594,0,0,0.87181193,-142.95738,-136.85215)"
inkscape:label="#yeux" />
<path
sodipodi:type="arc"
style="fill:#280b0b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.01100004;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="pupille_G-5"
sodipodi:cx="333.24432"
sodipodi:cy="278.08792"
sodipodi:rx="6.1033759"
sodipodi:ry="5.4930382"
d="m 339.3477,278.08792 a 6.1033759,5.4930382 0 1 1 -12.20675,0 6.1033759,5.4930382 0 1 1 12.20675,0 z"
transform="matrix(0.34294774,0,0,0.40215852,38.543149,-6.0332289)"
inkscape:label="#pupille" />
</g>
</svg>';
echo $svg; // Permet de l'afficher en html
$fichier_desti = fopen("homme.svg", 'w'); //si le fichier n'existe pas, il est créé avec l'option w
fputs($fichier_desti,$svg);//ecrit le svg dans le fichier
fclose($fichier_desti);
?>
avatar.js
[javascript]
/* PALETTE DE COULEUR */
champ="";
formulaire="";
//1. Ouvrir la palette
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
};
//2. Valider la couleur
function valid_couleur(couleur) /* lorsqu'on valide la palette,on récupère la couleur */
{
document.forms[formulaire].elements[champ].value=couleur;
};
/* FIN PALETTE */
/* DRAG & DROP */
$(function() {
$( ".draggable" ).draggable({ revert: "valid" }); //Ceux qui ont pour classe "draggable" peuvent bouger et reviennent a leur place
// Récuperation des couleurs grace a l'id
//0. peau --> pb résolu il fallait mettre un espace
$( "#peau " ).droppable({ // yeux est droppable
drop: function( event, ui ) {
$('#peau ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//1. yeux (ok)
$( "#yeux" ).droppable({ // yeux est droppable
drop: function( event, ui ) {
$('#yeux').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//2.col (ok)
$( "#col" ).droppable({ // col est droppable
drop: function( event, ui ) {
$('#col').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//3.cravate (ok)
$( "#cravate" ).droppable({ // cravate est droppable
drop: function( event, ui ) {
$('#cravate').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//4.tshirt --> pb résolu il fallait mettre un espace
$( "#tshirt " ).droppable({ // tshirt est droppable
drop: function( event, ui ) {
$('#tshirt ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//5.cheveux --> pb résolu il fallait mettre un espace
$( "#cheveux " ).droppable({ // cheveux est droppable
drop: function( event, ui ) {
$('#cheveux ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//6.veste --> pb résolu il fallait mettre un espace
$( "#veste " ).droppable({ // veste est droppable
drop: function( event, ui ) {
$('#veste ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//6.chemise --> pb résolu il fallait mettre un espace
$( "#chemise " ).droppable({ // chemise est droppable
drop: function( event, ui ) {
$('#chemise ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
});
/* FIN DRAG & DROP */
[/javascript]
avatar.css
legend{color:green;}
h2 {
text-align: center;
color:#C678F5;}
h4 {
text-align: center;
color:#25CC28;}
img{
width: 22px;
height: 22px;}
td,tr {border: 1px solid blue;
border-collapse: separate;
border-spacing: 100px;
padding:10px; }
.ps {
color:red;
font-style : italic;
font-size:12px;
}
.attention {
color:red;
font-weight : bold;
font-size:12px;
}
.download {
font-size : 14px;
}
/* Glisser-deposer */
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 2px; }
li { margin: 2px; padding: 1px;height: 20px; width: 150px; border: 1px solid black; background-color: black;}
.DeepSkyBlue { color:DeepSkyBlue;}
.Aqua { color:Aqua;}
.Cornsilk { color:Cornsilk;}
.Yellowgreen { color:Yellowgreen;}
.Yellow { color:Yellow;}
.Indianred { color:Indianred;}
.Orange { color:orange;}
.Gold { color:Gold;}
.Peru { color:Peru;}
.Chocolate { color:Chocolate;}
.Darkmagenta { color:Darkmagenta;}
.Hotpink { color:Hotpink;}
Merci d'avance pour ceux qui m'aiderons
Bonjour à tous,
Je suis actuellement bloqué et j'aurais besoin de votre aide.
Je travaille sur (encore) une génération d'avatars mais cette fois ci, mon avatar est complet !
En fonction de l'avatar que l'on a choisit, on a donc plusieurs possibilités pour le personnaliser : - via une palette de couleur
- via un glisser-deposer
[attachment=0]aaa.png[/attachment]
Comme on peut le voir sur cette image, chaque url contient les paramètres de l'avatar.
Le problème ?
On m'a demander de générer une centaine d'avatars différents en utilisant l'url mais cela ne fonctionne pas
En fait, pour être plus précis je ne voit pas comment faire, j'avais une idée mais il s'avère qu'elle ne fonctionne pas (voir ci-dessous):
[php]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<body >
<?php
$couleurs = array("couleur1","couleur2","couleur3"); // couleurs dans un tableau
$couleur_aleat = $couleurs[rand(0,3)]; //choix aleatoire de couleur
// mauvaise idee
echo 'Image:<br> <img src="http://localhost/davy/Projet%202/index.php?peau='.$couleur_aleat.'&yeux='.$couleur_aleat.'&tshirt='.$couleur_aleat.'&cravate='.$couleur_aleat.'&col=.'.$couleur_aleat.'" title="image aleatoire">';
// ne fonctionne pas :
echo 'Image:<br> <img src="http://localhost/davy/Projet%202/index.php?peau=Indianred&yeux=Chocolate&tshirt=Orange&cravate=Gold&col=Hotpink" title="image aleatoire">';
?>
</body>
</html>
[/php]
Le problème avec l'idée que j'avais était : - on doit rentrer les couleurs dans un tableau (vive le temps perdu)
- la même couleur apparaitra pour chaque paramétrè
Je vous met mes pages ci dessous car tout ne rentrera pas en fichier joints :
index.php (php conceptuel):
[php]
<?php
include_once("std.php") ;
$js1 = "//code.jquery.com/jquery-1.10.2.js";
$js2 = "//code.jquery.com/ui/1.10.4/jquery-ui.js";
$js3 = "avatar.js";
debutPage("Avatar","strict","avatar.css","$js1 $js2 $js3","http://localhost/davy/img/personne0.png") ;
// titre
h2(" Creez votre avatar :") ;
center ();
table ();
tr();
td();
center();
form("index.php","get",'name="choix-avatar"');
h4("Choix avatar :");
input_select("choix") ;
input_option("1","basique");
input_option("2","homme") ;
input_option("3","femme") ;
input_submit("Changer avatar"); br();br();
input_select_fin() ;
finform();
fincenter();
// choix
/* si option=1 alors include image.php sinon si opt=2 include imageh.php sinon si opt=3 include imagef.php ET si opt=NULL afficher image.php (voir empty)*/
$choix= !empty($_GET['choix']) ? $_GET['choix'] : 1;
if($choix==1)
{
include('image.php');
}
else if($choix==2)
{
include('homme.php');
}
else if ($choix=3)
{echo '3';
}
/* L'image est ici */
fintd();
td(); /* Suite du formulaire */
center();
fincenter();
if ($choix==1) {
$peau=!empty($_GET['peau']) ? $_GET['peau'] : NULL;
$yeux=!empty($_GET['yeux']) ? $_GET['yeux'] : NULL;
$tshirt=!empty($_GET['tshirt']) ? $_GET['tshirt'] : NULL;
$cravate=!empty($_GET['cravate']) ? $_GET['cravate'] : NULL;
$col=!empty($_GET['col']) ? $_GET['col'] : NULL;
center();
form("index.php","get",'name="base"');
echo ("Peau:"); br();
input_text('peau',''.$peau.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'peau\')');br(); br();
echo ("Yeux:"); br();
input_text('yeux',''.$yeux.'','Couleur des yeux');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'yeux\')'); br(); br();
echo ("T-shirt:"); br();
input_text('tshirt',''.$tshirt.'','Couleur du t-shirt');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'tshirt\')'); br(); br();
echo ("Cravate:"); br();
input_text('cravate',''.$cravate.'','Couleur de la cravate');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'cravate\')');br(); br();
echo ("Col:"); br();
input_text('col',''.$col.'','Couleur du col');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'base\',\'col\')'); br(); br();
span("ps") ; echo ("PS: Vous pouvez aussi deplacer les couleurs."); br();
echo("La couleur par default est le noir.");
finspan() ; br(); br();
input_submit("Appliquer les couleurs"); br();br();
span("download");
echo("Pour telecharger l'avatar c'est ici --> "); adownload('image.svg',"Telecharger","Votre Avatar");
}
else if ($choix==2)
{
$peau=!empty($_GET['peau']) ? $_GET['peau'] : NULL;
$yeux=!empty($_GET['yeux']) ? $_GET['yeux'] : NULL;
$veste=!empty($_GET['veste']) ? $_GET['veste'] : NULL;
$cravate=!empty($_GET['cravate']) ? $_GET['cravate'] : NULL;
$col=!empty($_GET['col']) ? $_GET['col'] : NULL;
$cheveux=!empty($_GET['cheveux']) ? $_GET['cheveux'] : NULL;
$chemise=!empty($_GET['chemise']) ? $_GET['chemise'] : NULL;
center();
form("index.php","get",'name="homme"');
echo ("Peau:"); br();
input_text('peau',''.$peau.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'peau\')');br(); br();
echo ("Cheveux:"); br();
input_text('cheveux',''.$cheveux.'','Couleur de peau');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'cheveux\')');br(); br();
echo ("Yeux:"); br();
input_text('yeux',''.$yeux.'','Couleur des yeux');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'yeux\')'); br(); br();
echo ("Chemise:"); br();
input_text('chemise',''.$chemise.'','Couleur de la veste');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'chemise\')'); br(); br();
echo ("Veste:"); br();
input_text('veste',''.$veste.'','Couleur de la veste');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'veste\')'); br(); br();
echo ("Cravate:"); br();
input_text('cravate',''.$cravate.'','Couleur de la cravate');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'cravate\')');br(); br();
echo ("Col:"); br();
input_text('col',''.$col.'','Couleur du col');
input_bouton_onclick("Ouvrir la palette",'ouvrir_palette(\'homme\',\'col\')'); br(); br();
span("ps") ; echo ("PS: Vous pouvez aussi deplacer les couleurs."); br();
echo("La couleur par default est le noir.");
finspan() ; br(); br();
input_submit("Appliquer les couleurs"); br();br();
span("download");
echo("Pour telecharger l'avatar c'est ici --> "); adownload('image.svg',"Telecharger","Votre Avatar");
}
finspan();
finform();
fincenter();
fintd();
td();
center();
echo ("Couleurs a faire glisser:"); br();br();
ul();
li1('class="draggable Aqua"',"Aqua");finli();
li1('class="draggable DeepSkyBlue"',"DeepSkyBlue");finli();
li1('class="draggable Yellowgreen"',"Yellowgreen");finli();
li1('class="draggable Indianred"',"Indianred");finli();
li1('class="draggable Orange"',"Orange");finli();
li1('class="draggable Yellow"',"Yellow");finli();
li1('class="draggable Gold"',"Gold");finli();
li1('class="draggable Peru"',"Peru");finli();
li1('class="draggable Chocolate"',"Chocolate");finli();
li1('class="draggable Darkmagenta"',"Darkmagenta");finli();
li1('class="draggable Hotpink"',"Hotpink");finli();
li1('class="draggable Cornsilk"',"Cornsilk");finli();
finul();br();
echo img("img/attention.png"); br();
span("attention");
echo('Les couleurs doivent etre placees'); br(); echo('sur la zone de texte');
finspan();
fincenter();
fintd();
fintr();
fintable();
fincenter();
finPageMinimale();
?>
[/php]
image.php
[php]
<?php
// On recupere les informations du formulaire et on test
if(isset($_GET['cravate']))
$coul_cravate=$_GET['cravate']; //si couleur personnalisée
else
$coul_cravate='white'; //sinon blanc par defaut
if(isset($_GET['col']))
$coul_col=$_GET['col']; //si couleur personnalisée
else
$coul_col='white'; //sinon blanc par defaut
if(isset($_GET['tshirt']))
$coul_tshirt=$_GET['tshirt']; //si couleur personnalisée
else
$coul_tshirt='white'; //sinon blanc par defaut
if(isset($_GET['yeux']))
$coul_yeux=$_GET['yeux']; //si couleur personnalisée
else
$coul_yeux='white'; //sinon blanc par defaut
if(isset($_GET['peau']))
$coul_peau=$_GET['peau']; //si couleur personnalisée
else
$coul_peau='white'; //sinon blanc par defaut
// Fin des tests
$svg='<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="349"
id="svg5537"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="image.svg">
<metadata
id="metadata5550">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="767"
inkscape:window-height="848"
id="namedview5548"
showgrid="false"
inkscape:zoom="0.60933961"
inkscape:cx="176.34349"
inkscape:cy="165.00446"
inkscape:window-x="832"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="svg5537" />
<desc
id="desc5539">Avatar</desc>
<defs
id="defs5541">
<g
id="tete">
<circle
cx="176"
cy="194"
r="130"
stroke="black"
fill="blue"
id="circle5544"
d="M 306,194 C 306,265.79702 247.79702,324 176,324 104.20298,324 46,265.79702 46,194 46,122.20298 104.20298,64 176,64 c 71.79702,0 130,58.20298 130,130 z" />
</g>
<!-- Début de la création de l avatar -->
</defs>
<!-- Peau -->
<path
sodipodi:type="arc"
style="fill:'.$coul_peau.';fill-opacity:0.69406391000000001;fill-rule:evenodd;stroke:#000000;stroke-width:1.44141793000000007;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.80365295000000003;stroke-dasharray:none;opacity:1"
id="peau"
sodipodi:cx="190.85249"
sodipodi:cy="183.88043"
sodipodi:rx="92.924431"
sodipodi:ry="95.06884"
d="m 283.77692,183.88043 a 92.924431,95.06884 0 1 1 -185.848858,0 92.924431,95.06884 0 1 1 185.848858,0 z"
transform="matrix(1.403424,0,0,1.3718014,-92.347035,-96.748451)"
inkscape:label="#peau" />
<!-- Oeil gauche -->
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-0.20299212,-37.77583)"
inkscape:label="#yeux" />
<!-- Pupille gauche -->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none"
id="pupilleG"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-5.2469634,-64.300067)"
inkscape:label="#pupille" />
<!-- Oeil droit -->
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-80.191992,-38.65833)"
inkscape:label="#yeux" />
<!-- Pupille droite-->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:0.80365293999999998"
id="pupilleD"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-85.246963,-64.300067)"
inkscape:label="#pupille" />
<!-- Tshirt -->
<path
style="fill:'.$coul_tshirt.';stroke:#000000;stroke-width:1.01100004000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 47.760189,182.27438 21.040317,14.608 15.83466,10.29199 16.164554,6.308 24.08188,4.98 43.21543,1.66 33.50087,-1.45151 24.22967,-6.18448 29.03022,-7.30401 32.65898,-13.94399 16.18675,-8.99102 c -0.74326,6.45035 -3.7249,13.47381 -6.10867,20.47099 -6.54343,20.38073 -27.72227,44.29602 -28.22196,44.29602 -6.36368,6.7901 -14.23989,12.90796 -23.09221,18.592 -0.60411,0.96519 -11.44887,7.50172 -20.06175,10.91301 -7.22374,2.65878 -12.98701,4.34391 -19.10969,6.26864 l -14.01322,1.62717 -22.98338,1.83842 -16.68994,-1.78499 c -5.11309,-0.97544 -9.90906,-1.63376 -16.33521,-3.92226 -4.8345,-1.6283 -9.70753,-3.29139 -15.50478,-5.78897 l -12.4135,-6.66059 c -3.13865,-1.73147 -7.6679,-4.85355 -11.546104,-7.32457 -3.941309,-3.12329 -7.915752,-6.28918 -13.751522,-11.8482 -5.73455,-5.05673 -10.534986,-11.67031 -15.474857,-18.05151 -4.469168,-5.97149 -7.806071,-12.50912 -11.200401,-19.01804 -4.177309,-9.74537 -7.735413,-19.55955 -9.436137,-29.5801 z"
id="tshirt"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<!-- Bas de cravate -->
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 185.985,327.248 c 15.73547,-18.51232 27.30568,-27.30568 27.30568,-27.30568 l -11.57021,-29.15692 -4.16527,-19.66934 -6.71072,-6.47932 -12.72722,0 -7.17353,3.70247 -18.74373,53.45434 4.62808,2.77685 z"
id="bas_cravate"
inkscape:connector-curvature="0"/>
<!-- Haut de cravate -->
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 162.39041,220.28175 -9.09541,13.0573 17.23488,14.64449 7.39473,-4.20153 11.62517,0 8.03791,6.45771 11.07467,-19.46215 c 0,0 -4.66545,-11.63575 -7.621,-11.63575 -2.95555,0 -38.65095,1.13993 -38.65095,1.13993 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsc"
inkscape:label="#cravate"/>
<!-- Col gauche -->
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 201.76163,218.75624 23.45612,-5.68637 28.74795,-7.58344 -11.03034,15.39318 -13.90223,13.4572 -13.32111,10.16172 -3.84904,2.56147 -2.82752,-16.32299 c -2.01552,-4.09821 -3.77811,-8.30482 -7.10179,-11.84239"
id="col_gauche"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- Col droit -->
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 96.62283,212.30707 c 9.54031,3.18301 19.46731,4.43255 29.25939,6.35672 l 36.18364,1.61483 -8.86926,13.04323 -2.55044,14.52495 -9.49997,-2.74074 -19.55364,-9.91058 -14.13532,-10.75701 z"
id="col_droit"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- bouche -->
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 167.30292,195.69684 4.11856,2.76909 c 7.2984,1.73982 16.33913,1.89412 20.79268,1.22451 l 9.74803,-2.01266 c 3.69991,-1.3347 7.16678,-1.97031 11.11672,-4.05512 4.11354,-3.25621 6.79585,-6.75096 10.16326,-10.13153 l 1.77334,-3.15259"
id="path6441"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</svg>';
echo $svg; // Permet de l'afficher en html
$fichier_desti = fopen("image.svg", 'w'); //si le fichier n'existe pas, il est créé avec l'option w
fputs($fichier_desti,$svg);//ecrit le svg dans le fichier
fclose($fichier_desti);
?>
[/php]
homme.php
[php]
<?php
// On recupere les informations du formulaire et on test
if(isset($_GET['cravate']))
$coul_cravate=$_GET['cravate']; //si couleur personnalisée
else
$coul_cravate='white'; //sinon blanc par defaut
if(isset($_GET['col']))
$coul_col=$_GET['col']; //si couleur personnalisée
else
$coul_col='white'; //sinon blanc par defaut
if(isset($_GET['veste']))
$coul_veste=$_GET['veste']; //si couleur personnalisée
else
$coul_veste='white'; //sinon blanc par defaut
if(isset($_GET['cheveux']))
$coul_cheveux=$_GET['cheveux']; //si couleur personnalisée
else
$coul_cheveux='white'; //sinon blanc par defaut
if(isset($_GET['yeux']))
$coul_yeux=$_GET['yeux']; //si couleur personnalisée
else
$coul_yeux='white'; //sinon blanc par defaut
if(isset($_GET['peau']))
$coul_peau=$_GET['peau']; //si couleur personnalisée
else
$coul_peau='white'; //sinon blanc par defaut
if(isset($_GET['chemise']))
$coul_chemise=$_GET['chemise']; //si couleur personnalisée
else
$coul_chemise='white'; //sinon blanc par defaut
$svg='<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="349"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="homme.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8963756"
inkscape:cx="269.88217"
inkscape:cy="173.42802"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1535"
inkscape:window-height="876"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:'.$coul_peau.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 159.85525,170.27637 c 6.43125,2.85605 11.90907,2.44581 18.2857,1.13613 3.64996,-1.33798 5.22587,-2.67595 7.35887,-4.01393 6.86126,-5.14535 10.04711,-10.94196 13.76235,-15.77409 l 6.68989,-14.69662 3.18537,-8.77664 3.56794,-1.11498 c 2.13423,-2.32275 3.86858,-4.92857 5.04675,-7.58188 1.32185,-3.44104 1.46621,-7.47081 1.86614,-11.37281 -0.3011,-2.32028 -0.99942,-3.7137 -1.78397,-4.90592 l -2.45296,-0.89198 -6.0209,8.02787 0.44599,-18.954691 -4.90592,-7.358875 -4.01393,-0.66899 -7.13588,3.12195 -18.0627,0 -13.37978,-4.90592 -7.58188,-5.12891 -2.89895,-3.79094 -7.80487,0.44599 -10.25783,10.70382 -2.67596,9.365845 -0.66899,15.832741 -4.23693,-6.68989 -1.56097,0 c -0.99506,1.50689 -2.21622,2.75537 -2.45296,5.12891 -0.12517,2.97798 0.22488,6.05101 0.66899,9.14285 0.89914,3.26847 2.8791,6.21269 4.90592,9.14285 l 4.01393,1.78397 5.12891,13.82577 7.13589,12.71079 7.80487,9.58884 c 2.24671,2.30429 4.8075,4.36445 8.02787,6.66874 z"
id="peau"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccccc" />
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.44400001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="367.87357"
sodipodi:cy="278.37762"
sodipodi:rx="7.940959"
sodipodi:ry="7.3367553"
d="m 375.81452,278.37762 a 7.940959,7.3367553 0 1 1 -15.88191,0 7.940959,7.3367553 0 1 1 15.88191,0 z"
transform="matrix(0.80470594,0,0,0.87181193,-106.10792,-136.85199)"
inkscape:label="#yeux" />
<path
sodipodi:type="arc"
style="fill:#280b0b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.01100004;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="pupille_G"
sodipodi:cx="333.24432"
sodipodi:cy="278.08792"
sodipodi:rx="6.1033759"
sodipodi:ry="5.4930382"
d="m 339.3477,278.08792 a 6.1033759,5.4930382 0 1 1 -12.20675,0 6.1033759,5.4930382 0 1 1 12.20675,0 z"
transform="matrix(0.34294774,0,0,0.40215852,75.718298,-6.0330761)"
inkscape:label="#pupille" />
<path
style="fill:'.$coul_cheveux.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 126.16601,102.07399 -1.01405,-25.632656 c 0.22114,-5.40097 1.10569,-9.97475 4.16027,-14.53331 1.06361,-2.8406 4.52108,-5.6516 7.76716,-6.9388 l 6.7691,-3.94895 c 3.94427,-2.24204 7.52083,-3.71849 13.71772,-5.2658 13.64612,-2.44855 23.40497,-1.65456 30.99649,0.44599 7.32827,2.60381 13.11345,5.78628 17.8397,9.36585 4.49904,3.88036 6.62774,8.77658 8.91985,13.60277 1.36928,5.91332 1.93813,9.82557 2.00697,12.48779 l 0,20.515656 -1.56097,-0.22299 -6.4669,8.25086 0.446,-19.623681 -4.76272,-6.544295 -4.33786,-0.5094 -6.69227,2.83792 -18.51107,0.061 -12.95493,-4.82613 -7.37525,-4.84488 -3.18297,-4.29558 c -2.59677,0.25773 -5.41274,0.3199 -7.70395,0.42485 l -4.49982,4.53972 -5.57491,6.38768 -2.89895,8.330065 -0.87323,16.642551 z"
id="cheveux"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<path
style="fill:'.$coul_peau.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 199.59959,150.82652 -0.84161,21.60161 -7.35888,7.13588 -13.37978,7.35888 -3.79094,1.33797 -1.11498,3.34495 -5.57491,0.66899 -2.22996,-3.12195 -16.27873,-9.14285 -9.14285,-9.14285 -0.93188,-25.8701 5.00924,8.93875 c 3.0005,3.79764 3.84798,4.99662 8.02786,9.76957 2.48325,2.23944 4.78539,4.34228 7.89642,6.51854 6.0209,2.89342 11.88921,2.76535 18.0627,1.56098 l 7.46285,-4.205 c 5.96174,-4.99546 10.40256,-10.69677 14.18545,-16.75337 z"
id="cou"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="#peau" />
<path
style="fill:'.$coul_chemise.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 199.00748,166.07808 4.63553,3.12323 -0.30517,9.98318 -7.80488,34.78743 -24.60938,67.84952 -24.6728,-64.28158 -5.35191,-19.17768 -4.45993,-19.17769 0.223,-10.42917 3.07158,-2.22395 0.28779,4.00663 9.57441,10.20747 15.60975,8.47386 2.67595,3.086 5.62528,-0.75531 1.06461,-2.77669 4.61103,-2.25149 12.24326,-7.06398 7.43078,-7.60341 z"
id="path3108"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccc" />
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 165.47663,189.36081 -4.75482,0.19416 -7.12877,10.17152 -2.58243,5.94179 9.60101,1.78328 -3.45778,37.54525 13.60991,36.56932 12.71079,-36.79439 -4.90591,-37.24038 10.03483,-2.45296 -2.40259,-5.74033 -1.87059,-3.56764 -4.20072,-4.05739 -5.71159,-3.16501 -1.18687,3.11464 -5.45986,0.69773 z"
id="bas_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="#cravate" />
<path
style="fill:'.$coul_cravate.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 160.89073,189.55973 -3.79785,5.00626 -3.10733,3.97048 -2.9347,7.07781 8.63147,1.38103 9.90272,2.54936 8.74127,-2.03147 10.18515,-2.58944 -2.41682,-5.69677 -2.07155,-3.27997 -4.14311,-3.97048 -5.52415,-3.15049 -0.77683,2.76207 -5.91256,0.81999 -2.11471,-2.84838 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccc"
inkscape:label="#cravate" />
<path
style="fill:'.$coul_veste.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 136.43968,169.00465 -15.83274,13.89856 -27.651542,5.5749 -12.71079,19.40068 -11.81881,46.38323 -1.78397,17.17072 14.04877,9.58884 15.38674,6.46689 14.940762,0 15.60974,6.68989 27.42854,3.56794 43.70728,-1.33797 24.52959,-4.90592 8.91985,-5.79791 10.92682,1.33798 19.62368,-6.24389 11.8188,-8.69686 -7.80487,-43.93027 -9.36584,-26.53656 -9.14285,-12.2648 -28.54353,-6.0209 -2.00697,-4.23693 -10.09381,-7.5442 c -1.05267,-0.81097 -3.22773,-2.81037 -3.04183,-2.30992 l -0.0211,11.1921 -7.58187,32.33446 -25.19859,69.10295 -24.97558,-65.08902 -6.63823,-25.7455 -2.68772,-11.8188 z"
id="veste"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccc" />
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 174.73923,188.67789 5.57491,-2.87723 11.26496,-6.25121 6.89135,-6.99919 0.71937,-5.94901 4.55334,2.47448 -0.17263,10.26515 -4.86996,20.78902 c -1.14994,4.3213 -1.44065,8.39555 -4.52472,10.47372 -3.12606,-2.36931 -5.84253,-8.0098 -8.0494,-12.87631 l -4.60372,-5.07144 -5.85557,-3.57505 z"
id="colG"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc"
inkscape:label="#col" />
<path
style="fill:'.$coul_col.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 139.57601,166.84786 -2.94932,2.14345 -0.22299,8.91274 5.35191,23.63761 c 1.00019,3.42506 0.96189,7.8615 4.23693,9.14285 3.59917,-3.63661 6.63403,-7.64944 8.17166,-12.66042 l 6.76909,-8.30123 4.45993,0.223 -0.223,-1.56098 -14.71775,-7.35888 -10.32973,-9.98446 z"
id="colD"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccc"
inkscape:label="#col" />
<path
style="fill:'.$coul_veste.';stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 136.59652,169.38866 -15.76822,13.87603 -0.31536,32.48254 9.46093,0.31536 0.14274,0.27873 -8.80031,7.77127 1.40419,14.65624 c 2.226,6.94783 0.59129,7.33728 10.25755,26.72977 9.61443,19.07118 13.66774,21.11374 19.61913,31.9579 l 37.99994,-1.06567 c 7.32115,-11.18023 11.83116,-20.33797 17.42125,-33.93978 7.3421,-18.77975 8.06263,-23.78099 11.43606,-33.77388 l -0.86315,-6.30729 -9.46093,-5.99193 10.09166,-1.57682 0,-30.59035 -2.20755,-4.73046 -13.53078,-10.63945 -0.0299,11.90091 -7.25338,30.7196 c -8.94714,23.83691 -17.5436,45.82211 -24.71126,70.99362 l -26.69314,-67.65387 -1.89219,-7.88411 -5.99192,-24.91379 z"
id="haut_veste"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccc"
inkscape:label="#veste" />
<path
style="fill:none;stroke:#000000;stroke-width:1.14024198px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 172.52183,114.83846 2.14087,14.57938 -2.69061,3.39463 -2.39068,-0.20946"
id="path3870"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 155.29289,146.79736 c 13.58927,7.70109 23.23587,7.3935 32.22583,-0.48827"
id="path3874"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
sodipodi:type="arc"
style="fill:'.$coul_yeux.';fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.44400001;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="367.87357"
sodipodi:cy="278.37762"
sodipodi:rx="7.940959"
sodipodi:ry="7.3367553"
d="m 375.81452,278.37762 a 7.940959,7.3367553 0 1 1 -15.88191,0 7.940959,7.3367553 0 1 1 15.88191,0 z"
transform="matrix(0.80470594,0,0,0.87181193,-142.95738,-136.85215)"
inkscape:label="#yeux" />
<path
sodipodi:type="arc"
style="fill:#280b0b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.01100004;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="pupille_G-5"
sodipodi:cx="333.24432"
sodipodi:cy="278.08792"
sodipodi:rx="6.1033759"
sodipodi:ry="5.4930382"
d="m 339.3477,278.08792 a 6.1033759,5.4930382 0 1 1 -12.20675,0 6.1033759,5.4930382 0 1 1 12.20675,0 z"
transform="matrix(0.34294774,0,0,0.40215852,38.543149,-6.0332289)"
inkscape:label="#pupille" />
</g>
</svg>';
echo $svg; // Permet de l'afficher en html
$fichier_desti = fopen("homme.svg", 'w'); //si le fichier n'existe pas, il est créé avec l'option w
fputs($fichier_desti,$svg);//ecrit le svg dans le fichier
fclose($fichier_desti);
?>
[/php]
avatar.js
[javascript]
/* PALETTE DE COULEUR */
champ="";
formulaire="";
//1. Ouvrir la palette
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
};
//2. Valider la couleur
function valid_couleur(couleur) /* lorsqu'on valide la palette,on récupère la couleur */
{
document.forms[formulaire].elements[champ].value=couleur;
};
/* FIN PALETTE */
/* DRAG & DROP */
$(function() {
$( ".draggable" ).draggable({ revert: "valid" }); //Ceux qui ont pour classe "draggable" peuvent bouger et reviennent a leur place
// Récuperation des couleurs grace a l'id
//0. peau --> pb résolu il fallait mettre un espace
$( "#peau " ).droppable({ // yeux est droppable
drop: function( event, ui ) {
$('#peau ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//1. yeux (ok)
$( "#yeux" ).droppable({ // yeux est droppable
drop: function( event, ui ) {
$('#yeux').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//2.col (ok)
$( "#col" ).droppable({ // col est droppable
drop: function( event, ui ) {
$('#col').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//3.cravate (ok)
$( "#cravate" ).droppable({ // cravate est droppable
drop: function( event, ui ) {
$('#cravate').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//4.tshirt --> pb résolu il fallait mettre un espace
$( "#tshirt " ).droppable({ // tshirt est droppable
drop: function( event, ui ) {
$('#tshirt ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//5.cheveux --> pb résolu il fallait mettre un espace
$( "#cheveux " ).droppable({ // cheveux est droppable
drop: function( event, ui ) {
$('#cheveux ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//6.veste --> pb résolu il fallait mettre un espace
$( "#veste " ).droppable({ // veste est droppable
drop: function( event, ui ) {
$('#veste ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
//6.chemise --> pb résolu il fallait mettre un espace
$( "#chemise " ).droppable({ // chemise est droppable
drop: function( event, ui ) {
$('#chemise ').val(ui.draggable.text()); // Recuperation du texte déposé
$(this).addClass(ui.draggable.attr('class').split(' ')[1]);
}
});
});
/* FIN DRAG & DROP */
[/javascript]
avatar.css
[css]
legend{color:green;}
h2 {
text-align: center;
color:#C678F5;}
h4 {
text-align: center;
color:#25CC28;}
img{
width: 22px;
height: 22px;}
td,tr {border: 1px solid blue;
border-collapse: separate;
border-spacing: 100px;
padding:10px; }
.ps {
color:red;
font-style : italic;
font-size:12px;
}
.attention {
color:red;
font-weight : bold;
font-size:12px;
}
.download {
font-size : 14px;
}
/* Glisser-deposer */
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 2px; }
li { margin: 2px; padding: 1px;height: 20px; width: 150px; border: 1px solid black; background-color: black;}
.DeepSkyBlue { color:DeepSkyBlue;}
.Aqua { color:Aqua;}
.Cornsilk { color:Cornsilk;}
.Yellowgreen { color:Yellowgreen;}
.Yellow { color:Yellow;}
.Indianred { color:Indianred;}
.Orange { color:orange;}
.Gold { color:Gold;}
.Peru { color:Peru;}
.Chocolate { color:Chocolate;}
.Darkmagenta { color:Darkmagenta;}
.Hotpink { color:Hotpink;}
[/css]
Merci d'avance pour ceux qui m'aiderons :D
