24-04-2007, 09:13 AM
Je penche aussi pour une gestion 100% client avec un bouton de sauvegarde une fois le choix effectué.
C'est plus naturel comme mécanisme et ça permet de ne pas valider un design qui ne nous plait pas (j'ai un avatar, je veux le modifier et finalement les modifs ne me plaisent pas).
Ca décharge le serveur des traitements GD inutiles lors des etapes de prévisu.
[edit]
Pour le fun et les amateurs de JS, voici une version (totalement inutile) 100% JS.
Ce n'est pas optimisé (il y a quelques tests sont on pourrait se passer avec une meilleure organisation des variables) mais il y a des bouts de codes "amusant" dedans comme la génération d'éléments dynamiques avec support des évènements onClick, etc.
Les images utilisées pointent directement sur le site d'origine. c'est donc utilisable par tout le monde en local.
C'est plus naturel comme mécanisme et ça permet de ne pas valider un design qui ne nous plait pas (j'ai un avatar, je veux le modifier et finalement les modifs ne me plaisent pas).
Ca décharge le serveur des traitements GD inutiles lors des etapes de prévisu.
[edit]
Pour le fun et les amateurs de JS, voici une version (totalement inutile) 100% JS.
Ce n'est pas optimisé (il y a quelques tests sont on pourrait se passer avec une meilleure organisation des variables) mais il y a des bouts de codes "amusant" dedans comme la génération d'éléments dynamiques avec support des évènements onClick, etc.
Les images utilisées pointent directement sur le site d'origine. c'est donc utilisable par tout le monde en local.
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>