Well w/o refreshing the page you are getting into Ajax and DHTML to force the image to be redrawn and to get the image to reload....
Character Creation System
I guess I have some new stuff to look into. 
Kibeth wrote:I guess I have some new stuff to look into.
For Ajax and DHTML stuff I would recommened looking into Dojo its a relatively easy and extremely comprehensive X-browser Javascript toolkit thats extremely customizable for what you need... its lacking documentation at this point but the community is extremely helpful.
Kibeth: There are lots of ways to do this and you have to ask yourself a bunch of questions before you start programming so that you end up with the product you're looking for.
One question is, what do you want to end up with? Do you want the final product to be a static image (like a GIF or a JPG) that will be displayed as someone's avatar? Or do you want to end up with data in a database so that the image will be constructed on the fly everytime it's called for? For example, let's say that part of the image was a smile or a frown based on your current mood. A static graphic wouldn't be much good because you'd have to throw away the image and redraw it everytime it was rendered based on current variables.
Another question you have to ask is, once the character has been defined, whether you want this to be rendered server side so that the client side gets a fixed (uneditable) image or do you want the client side to have the ability to receive a bunch of parts that it assembles itself. For example, if you use DHTML to assemble these parts on the client side, then when they view a character, the character can change based on events that happen within the recipient's browser. Imagine that you define a character "Joe" and some user surfs to the "Contact Us" page of your web site and "Joe" appears in the top right corner. The user starts to fill in the form but they enter their age is 200 years old. You want Joe's smile to turn to a frown or for his eyes to go wide like saucers. You could do this with DHTML (or better yet, Flash). But the real question is, Is your goal to have the character dynamic on the client side?
If you are not aiming for dynamic client side behavior, then this could be done on the server side with something like GD (though I prefer ImageMagick). The result of this would be a static uneditable image.
Once you have your goal in mind, then you can begin to choose implementation.
Client side rendering always brings in browser compatibility issues. (Server side construction of a GIF or JPG is a no-brainer because everyone can see image files). AJAX is a technique that makes it appear to be client side (it's faster) but it's server side rendering which is more compatible.
Through this whole thing, nobody has even mentioned imagecopymerge(). If you want to, you can see my simple character maker here:
http://phpshift.fireproductions.co.uk/merge.php
It uses images of the same size with transparent backgrounds and it layers them together using the imagecopymerge() function ad it saves it to a new file. To find more on imagecopymerge(), go here:
etully: I'm going to try and make it so that the user can control the initial creation of the character, by like clicking on Hair, and then next or previous until they get their desired look. Then, it stores all those variables that have been set into a database, and creates a static image, which will be loaded where it is appropriate. For editing, I plan to create a system where you can select items, and apply them, and it'll just re-write the location's value to the database, and then re-merge all of the variables into the final image again, just overwriting it.
phpshift: I've already created a function with imagecopymerge that will apply all the locations and output the final image.
The real trouble I'm having has to deal with the database, and the interface that allows them to initially create their character. I'm haven't watched any of the MySQL videos I have really, and I'm just wondering how to structure it. Right now, I have a database, and then a table in it called avatar, then I have char_id, ava_eyes, ava_hair, ava_emotion, and it stores a number in each one. The number is then used to place into the filename of the hair, eyes, or emotion so it uses the write one, then merges them all down to get the final image. Would this case a problem if I wanted to store information about each thing, say once I got into adding articles of clothing, and wanted to have names and descriptions about each one? There's an example of it here. This isn't the current version I'm using. This one is where I took tekky's advice and stored the information in an array, and then it saves the image based on the ID you enter, and it will overwrite the old image with that ID.
To make sure it's actually doing the saving and what not, I added:
phpshift wrote:Through this whole thing, nobody has even mentioned imagecopymerge().....
That was never really the problem he was looking for help with....
Sorry, I misunderstood. Well, what I would do is if your image is created by PHP using GET variables, I'd do something like this:
<script>
function makechar()
{
charimg.src="/character.php?body="+bodnum+"&legs="+legnum+"&head="+headnum+"&feet="+feetnum+"&hair="+hairnum;
};
</script>
<form>
Hair Number:<input type="text" id="han"><br>
Head Number:<input type="text" id="hn"><br>
Body Number:<input type="text" id="bn"><br>
Legs Number:<input type="text" id="ln"><br>
Feet Number:<input type="text" id="fn"><br>
<input type="button" value="Assemble Body" onClick="hairnum=han.value; headnum=hn.value; bodynum=bn.value; legnum=ln.value; feetnum=fn.value; javascript: makechar(); ">
</form><br><br>
<img src="" id="charimg">
That's it. I'm sure you'd do it completely different.
I'll try to base something off that, but the main thing I see is that the image source doesn't seem to be an actual file, but supposedly returned through the script? My script saves the image an images directory, and filename is "head".$id.".png"; I'm going to try and make what you gave me do something of the sort.
Well, most likely, you're going to want people to be able to edit their character and look it over before actually saving it to their image file. This code will give them the idea of what they look like and this will allow them to save it:
<script>
function makechar()
{
charimg.src="/character.php?body="+bodnum+"&legs="+legnum+"&head="+headnum+"&feet="+feetnum+"&hair="+hairnum;
savebox.value="/character.php?body="+bodnum+"&legs="+legnum+"&head="+headnum+"&feet="+feetnum+"&hair="+hairnum;
};
</script>
<form>
Hair Number:<input type="text" id="han"><br>
Head Number:<input type="text" id="hn"><br>
Body Number:<input type="text" id="bn"><br>
Legs Number:<input type="text" id="ln"><br>
Feet Number:<input type="text" id="fn"><br>
<input type="button" value="Assemble Body" onClick="hairnum=han.value; headnum=hn.value; bodynum=bn.value; legnum=ln.value; feetnum=fn.value; javascript: makechar(); ">
</form>
<br>
<form action="save.php" method="post"><br>
<img src="" id="charimg
<input type="hidden" id="savebox"><br>
<input type="submit" value="Save">
</form>
Then on your page to save, put this code:
<?
imagecreatefromPNG($POST["savebox"]);
$image=imagePNG($image,"head".$SESSION["id"].".png");
imagedestroy($image);
?>
<html>
<head>
<title>Avatar Creator</title>
<script>
var eyes = 1
var hair = 1
var emo = 1
function next_eyes()
{
eyes = eyes + 1
if (eyes < 1)
{
eyes = 4
return eyes;
}
if (eyes > 4)
{
eyes = 0
return eyes;
}
}
function next_hair()
{
hair = hair + 1
if (hair < 1)
{
hair = 5
return hair;
}
if (hair > 5)
{
hair = 0
return hair;
}
}
function prev_eyes()
{
eyes = eyes - 1
if (eyes < 1)
{
eyes = 5
return eyes;
}
if (eyes > 4)
{
eyes = 1
return eyes;
}
}
function prev_hair()
{
hair = hair - 1
if (hair < 1)
{
hair = 6
return hair;
}
if (hair > 5)
{
hair = 1
return hair;
}
}
function finalizeAvater()
{
/*Whatever is needed to make this thing work.*/
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td valign="bottom">
<input type="button" value="Previous Eyes" onClick="prev_eyes()">
</td>
<td rowspan="2">
<!-- Get image to appear after each clip, I'm sure I'd have to add another function to each prev_eyes() -->
<img src="images/head1.png">
</td>
<td valign="bottom">
<input type="button" value="Next Eyes" onClick="next_eyes()">
</td>
</tr><tr>
<td valign="top">
<input type="button" value="Previous Hair" onClick="prev_hair()">
</td>
<td valign="top">
<input type="button" value="Next Hair" onClick="next_hair()">
</td>
</tr>
</table>
<input type="button" value="Create" onClick="finalizeAvatar(); ">
</form>
</body>
</html>
I know there's a lot.. lot.. that needs to be done to this, and I was wondering if I could change some of these functions into PHP so it'd make the program a little more portable. But yeah, not really sure how I'd go about running a PHP script from the JavaScript, and I still haven't gotten a feel for the syntax, but this allows the numbers for the eyes, and hair to go up, and then I need to run it to the script at functions-arrays.php, and get the image back.