http://www.dasombang.com/papa/avatar/http://www.eventboy.comFreechal.com 과 같은 형태의 아바타를 만들어 봅시다.
물론 프리챌처럼 많은 기능은 다 표현하기 힘들기 때문에,
기본적인 기능만이 있는 아바타를 만들어 보도록 하겠습니다.
위 링크중 http://www.dasombang.com/papa/avatar/ 부분을 클릭하시면 보실수 있습니다.

이미지를 프리챌 이미지를 그대로 사용했습니다.
학습용으로 만들어 본거지만, 저작권에 위배된다면.. 페이지를 삭제하도록 하겠습니다.

아래는 관련 페이지 소스입니다...
도움 되시길 바랍니다..

넘 허접하게 만든것 같아서.. 쩝...

<?
/*
//아바타 레벨관련 정의
// freechal.com .. 프로그램 적용된 이미지포맷
http://218.145.54.39/_Avatar/800/800MN0043s.gif
배경                        images/_Avatar/020/020U00008s.gif
몸(MD/WD)        images/_Avatar/160/160MD0000s.gif
얼굴형                images/_Avatar/180/180UD0000s.gif
코.입                images/_Avatar/190/190UD0001s.gif
눈                        images/_Avatar/200/200UD0000s.gif
선글라스                images/_Avatar/240/240UN0004s.gif
귀걸이                images/_Avatar/260/260UN0003s.gif
양말(MN/WN)        images/_Avatar/280/280MN0003s.gif
신발(MN/WN)        images/_Avatar/480/480MN0011s.gif
하의(MN/WN)        images/_Avatar/520/520MN0037s.gif
목걸이                images/_Avatar/740/740UN0011s.gif
상의(MN/WN)        images/_Avatar/800/800MN0002s.gif
상의외투                images/_Avatar/810/810MN0008s.gif
헤어                        images/_Avatar/840/840U00037s.gif
*/

        // 성별에 관한 처리부분
        if(!$strGetSex) $strGetSex = "M";

?>

<script language=javascript>
<!--
var intLayLen = 3;

<?
        // 성별에 따른 기본 의상을 세팅한다.
        if($strGetSex == "W")
        {
                echo "var strGetSex        = 'W';n";
                if($wearlist == "")
                {
                        echo "var wearlist        = '160W0000,180U0000,190U0000,200U0000,840U0003';";
                } else
                {
                        echo "var wearlist        = '$wearlist';";
                }
        } else
        {
                echo "var strGetSex        = 'M';n";
                if($wearlist == "")
                {
                        echo "var wearlist        = '160M0000,180U0000,190U0000,200U0000,840U0000';";
                } else
                {
                        echo "var wearlist        = '$wearlist';";
                }
        }
?>

// 옷 입히는 함수1
function WearList(strCheck)
{
        if(strCheck.substring(0,1) == ",")
                strCheck = strCheck.substring(0);

        var vntCheck = strCheck.split(',');
        var LayNM;
        
        for(i=0;i<vntCheck.length;i++)        
        {                
                LayNM = vntCheck[i].substring(0,intLayLen);        
                imgNM = vntCheck[i].substring(0) + ".gif";                                        
                //이미지 삽입
                eval("document.image" + LayNM + ".src ='images/" + imgNM + "'");                
        }
}

// 옷 입히는 함수2
function getDress(Item, AddItem)
{        
        if(Item == "") return;

        var ItemSex = Item.substr(intLayLen,1);        

        if ((ItemSex.toUpperCase() != "U") && (ItemSex.toUpperCase() != strGetSex))
        {
                alert("성별이 다릅니다.");
                return;
        }

        var LayNM,xx;
        LayNM = Item.substring(0,intLayLen);        
        imgNM = Item.substring(0) + ".gif";                

        var temp = wearlist.split(",");
        for(i=0;i<temp.length;i++)
        {
                if(temp[i].substring(0,intLayLen) == LayNM)
                {
                        temp[i] = Item;
                        xx = 0;
                }
        }
        wearlist = temp.join();
        if(xx!=0) wearlist = wearlist + ',' + Item;

        eval("document.image" + LayNM + ".src ='images/" + imgNM + "'");
}

function goCategory(Category, ItemSpec)
{
        document.location.href = "?Category=" + Category + "&ItemSpec=" + ItemSpec + "&strGetSex=" + strGetSex + "&wearlist=" + wearlist;
}

function chgSexM()
{
        document.location.href='/?strGetSex=M';
}

function chgSexW()
{
        document.location.href='/?strGetSex=W';
}
-->
</script>

<div align="center">
<table border="0" cellspacing="0" width="600" bgcolor="black">
    <tr>
        <td align="center" bgcolor="white" width="298">
                        <p>
                        <DIV id=avatar style='position:relative ;left:2;top:0;width:100; height:200;overflow:visible;background-color:white'>
                                <DIV id=layer020 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:1'><img name='image020' id='image020' src='images/1by1.gif' border=0 style='z-index:1'></DIV>
                                <DIV id=layer160 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:2'><img name='image160' id='image160' src='images/1by1.gif' border=0 style='z-index:2'></DIV>
                                <DIV id=layer180 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:3'><img name='image180' id='image180' src='images/1by1.gif' border=0 style='z-index:3'></DIV>
                                <DIV id=layer190 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:4'><img name='image190' id='image190' src='images/1by1.gif' border=0 style='z-index:4'></DIV>
                                <DIV id=layer200 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:5'><img name='image200' id='image200' src='images/1by1.gif' border=0 style='z-index:5'></DIV>
                                <DIV id=layer240 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:6'><img name='image240' id='image240' src='images/1by1.gif' border=0 style='z-index:6'></DIV>
                                <DIV id=layer260 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:7'><img name='image260' id='image260' src='images/1by1.gif' border=0 style='z-index:7'></DIV>
                                <DIV id=layer280 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:8'><img name='image280' id='image280' src='images/1by1.gif' border=0 style='z-index:8'></DIV>
                                <DIV id=layer480 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:9'><img name='image480' id='image480' src='images/1by1.gif' border=0 style='z-index:9'></DIV>
                                <DIV id=layer520 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:10'><img name='image520' id='image520' src='images/1by1.gif' border=0 style='z-index:10'></DIV>
                                <DIV id=layer740 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:11'><img name='image740' id='image740' src='images/1by1.gif' border=0 style='z-index:11'></DIV>
                                <DIV id=layer800 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:12'><img name='image800' id='image800' src='images/1by1.gif'+ ' border=0 style='z-index:12'></DIV>
                                <DIV id=layer810 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:13'><img name='image810' id='image810' src='images/1by1.gif' border=0 style='z-index:13'></DIV>
                                <DIV id=layer840 style='position:absolute; left:0px; top:0px; width:100; height:200; z-index:14'><img name='image840' id='image840' src='images/1by1.gif' border=0 style='z-index:14'></DIV>
                        </DIV>
                        </p>
                </td>
        <td align="center" bgcolor="white" width="298">
                <p align="left">
<?
        if($strGetSex == "M")
        {
                echo "<a href='javascript:chgSexW()' class=bk>여자 아바타 꾸미기</a><br>";
        } else
        {
                echo "<a href='javascript:chgSexM()' class=bk>남자 아바타 꾸미기</a><br>";
        }
?>
                                <a href=javascript:goCategory('180','U') class=bk>얼굴형</a> |
                                <a href=javascript:goCategory('200','U') class=bk>눈</a> |
                                <a href=javascript:goCategory('190','U') class=bk>코/입</a> |
                                <a href=javascript:goCategory('160','') class=bk>몸</a> |
                                <a href=javascript:goCategory('840','U') class=bk>헤어</a><br>
                                <a href=javascript:goCategory('800','') class=bk>상의</a> |
                                <a href=javascript:goCategory('520','') class=bk>하의</a> |
                                <a href=javascript:goCategory('280','') class=bk>양말</a> |
                                <a href=javascript:goCategory('480','') class=bk>신발</a> |
                                <a href=javascript:goCategory('240','U') class=bk>선글라스</a> |
                                <a href=javascript:goCategory('260','U') class=bk>귀걸이</a> |
                                <a href=javascript:goCategory('020','U') class=bk>배경</a></p>
                </td>
    </tr>
    <tr>
        <td align="center" bgcolor="white" colspan="2">
                <p>
<?

if($ItemSpec <> "U") $ItemSpec = $strGetSex;
$like_state = $Category.$ItemSpec;

        $query = "SELECT * FROM avatar WHERE image like '$like_state%'";

        
        $result = mysql_query($query,$dbconn);
        if (!$result) {
                error("QUERY_ERROR");
                exit;
        }

        while($row = mysql_fetch_object($result))
        {
                $item = explode(".gif",$row->imgage);
                $items = $item[0]."s";
                echo "<a href="javascript:getDress('$item[0]','')"><img src='images/$items.gif' border=0 align=absmiddle width='94'></a>  ";
        }

?>
                                </p>
                </td>
        </tr>
    <tr>
        <td align="center" bgcolor="white" colspan="2">
                <p> </p>
                </td>
    </tr>
</table></div>

<TABLE cellSpacing=0 cellPadding=0 width="600" align=center border=0>
        <TR>
                <TD><font class="bunho1"> 01 </font> <B>소개</B></TD>
        </TR>
        <TR>
                <TD><br>
                        <table border="0" cellpadding="0" cellspacing="0" width="550" align=right>
                            <tr>
                                <td>
                                    <p>
                                                간단한 기능만 있는 아바타를 만들어 봤습니다.<br>
                                                회원기능 및 쇼핑 기능을 추가하면 완벽한 내용이 되겠죠. ^^<br>
                                                이미지 저작권 때문에... 홈피에 적용을 시키지 못했습니다....(실력이 없어서 일수도 -.-;;)<br><br>
                                                별다른 설명이 없어도 소스보기 하셔서 HTML 소스 보시면 시원하게 아실수 있을듯 싶습니다.<br>
                                                PHP프로그래밍이 들어간 부분은 거의 없으니까요..<br><br>
                                                ※ 위 아바타의 이미지는 Freechal.com의 이미지를 사용하였습니다.<br>
                                                학습용으로 사용하였음을 밝히며, 저작권에 문제가 된다면 페이지를 삭제하도록 하겠습니다.<br>
                                                </p>
                                </td>
                            </tr>
                        </table>                        
                </TD>
        </TR>        
        <TR>
                <TD background="/common/images/guide_dot.gif" height=1></TD>
        </TR>        <TR>
                <TD><font class="bunho1"> 01 </font> <B>설명</B></TD>
        </TR>
        <TR>
                <TD><br>
                        <table border="0" cellpadding="0" cellspacing="0" width="550" align=right>
                            <tr>
                                <td>
                                    <p>
                                                Layer를 사용해서 프리챌에서 하느 방식으로 만들어 봤습니다.<br>
                                                거의 카피 수준입니다.        공부하시는 분께는 간략한게 좋을듯 싶어서리. -.-;;<br><br>

                                                남여 성별에 따른 분류를 하신후 각각의 이미지를 레이어 순서로 쌓아 올려주면 되는겁니다.<br>
                                                프로그램 적인 것이 없어서 더이상 설명드리기가 힘들군요.. 하하...<br>
                                                <a href=index.phps target=_blank class=bk>소스</a> 보시고 도움되시길 바랍니다.<br><br>
                                                ▶ <a href=index.phps target=_blank class=bk>소스보기</a><br><br>
                                                </p>
                                </td>
                            </tr>
                        </table>                        
                </TD>
        </TR>        
        <TR>
                <TD background="/common/images/guide_dot.gif" height=1></TD>
        </TR>
</TABLE>

<script language=javascript>
        WearList(wearlist);        
</script>