[Réglé] [GD] Script génération de skin

Code PHP :
<?php 

<html>

    <head>

        <script language="javascript"  type="text/javascript">



        //Valeurs par défaut au chargement

        var sBase='http://aurelien68.free.fr/perso/images/2/';

        var iYeux=1;

        var iCheveux=1;

        var iArmure=1;

        var iSsArmure=1;



        function findPos(obj) {

            var curleft = curtop = 0;

            if (obj.offsetParent) {

                curleft = obj.offsetLeft

                curtop = obj.offsetTop

                while (obj = obj.offsetParent) {

                    curleft += obj.offsetLeft;

                    curtop += obj.offsetTop;

                }

            }

            return [curleft,curtop];

        }        



        //Initialisation des éléments de la page

        function loadBuild(){    

            loadModel('cheveux',11);    

            loadModel('yeux',6);    

            loadModel('sous-armures',5);    

            loadModel('armures',4);

            BuildImage('mini');

            BuildImage('maxi');

            setPart('cheveux',iCheveux);

            setPart('yeux',iYeux);

            setPart('sous-armures',iSsArmure);

            setPart('armures',iArmure);

        }

        

        //Chargement des images modèle et association des scripts

        function loadModel(sType,iTot){

            var oDiv=document.getElementById('panel');

            for(var i=1;i<=iTot;i++){

                oImg=document.createElement('img');

                oImg.src=sBase+sType+'/'+i+'.png';

                oImg.id=sType+i;

                oImg.val=i;

                oDiv.appendChild(oImg);

                oImg.onclick=function () {

                    if(sType=='cheveux') iCheveux=this.val;

                    else if(sType=='yeux') iYeux=this.val;

                    else if(sType=='sous-armures') iSsArmure=this.val;

                    else if(sType=='armures') iArmure=this.val;

                }

                oImg.onmouseover=function () {

                    document.getElementById('mini'+sType).src=this.src

                    document.getElementById('maxi'+sType).src=this.src

                }

                oImg.onmouseout=function () {

                    if(sType=='cheveux') setPart(sType,iCheveux);

                    else if(sType=='yeux') setPart(sType,iYeux);

                    else if(sType=='sous-armures') setPart(sType,iSsArmure);

                    else if(sType=='armures') setPart(sType,iArmure);

                }

            }

            oBr=document.createElement('br');

            oDiv.appendChild(oBr);

        }

        

        //construction des deux images de prévisu

        function BuildImage(sMode){

            var oDiv=document.getElementById(sMode);

            aCoord=findPos(oDiv)

            oDiv.innerHTML='';

            setTete(oDiv,aCoord);

            loadPart('cheveux',iCheveux,oDiv,aCoord);

            loadPart('yeux',iYeux,oDiv,aCoord);

            loadPart('sous-armures',iSsArmure,oDiv,aCoord);

            loadPart('armures',iArmure,oDiv,aCoord);

        }

        

        // Construction des éléments des images de prévisu

        function loadPart(sType,iVal,oElem,aCoord){

            oImg=document.createElement('img');

            oImg.src=sBase+sType+'/'+iVal+'.png';

            oImg.style.position='absolute';

            oImg.style.top=aCoord[1]+'px';

            oImg.style.left=aCoord[0]+'px';

            oImg.id=oElem.id+sType;

            oElem.appendChild(oImg);

            oImg.style.width=oImg.parentNode.style.width

            oImg.style.height=oImg.parentNode.style.height

        }

        

        //Mise en place des éléments de l'image finale en fonction des valeurs

        function setPart(sType,iVal){

            oImg=document.getElementById('mini'+sType);

            oImg.src=document.getElementById(sType+iVal).src;

            oImg=document.getElementById('maxi'+sType);

            oImg.src=document.getElementById(sType+iVal).src;

        }

        

        //Construction du visage

        function setTete(oElem,aCoord){

            oImg=document.createElement('img');

            oImg.src=sBase+'tete.png';

            oImg.style.position='absolute';

            oImg.style.top=aCoord[1]+'px';

            oImg.style.left=aCoord[0]+'px';

            oElem.appendChild(oImg);

            oImg.style.width=oImg.parentNode.style.width

            oImg.style.height=oImg.parentNode.style.height

        }

        

        function saveImg(){

            // Mettre ici le code de sauvegarde GD de l'image.

        }

        </script>

        <style type="text/css">

        img:hover{

            cursor:pointer;

        }

        img{

            border: 1px solid black;

            margin:2px;

        }

        </style>

    </head>

    <body onLoad="javascript:loadBuild();">

        <div id="panel"></div>

        <br />

        <table>

            <tr>

                <td valign="bottom"><div id="maxi" style="width:64px;height:96px;" ></div></td>

                <td valign="bottom"><div id="mini" style="width:32px;height:48px;" ></div></td>

            </tr>

        </table>

        <br />

        <input type="submit" onClick="saveImg()">

    </body>

</html>