PHP & Others

Freechal.com 과 같은 형태의 아바타를 만들자 !!

작성자 정보

컨텐츠 정보

본문

Freechal.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>



-------------------------------------------------------------

그림가져오기 - 화면보기...
<?php

print"<br>옷";
for ($i=10; $i < 20 ; $i++) {
$giff="800MN00". $i ."s.gif";
//http://218.145.54.39/_Avatar/800/800MN0043s.gif
print"<img src='http://218.145.54.39/_Avatar/800/$giff' border=0>";
}

print"<br>배경";
for ($i=0; $i < 9 ; $i++) {
$giff="020/020U0000". $i ."s.gif";
//배경 http://218.145.54.39/images/_Avatar/020/020U00008s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}
print"<br>";

print"<br>몸";
for ($i=0; $i < 9 ; $i++) {
$giff="160/160MD000". $i ."s.gif";
//몸(MD/WD) images/_Avatar/160/160MD0000s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>얼굴형";
for ($i=10; $i < 20 ; $i++) {
$giff="180/180UD00". $i ."s.gif";
//얼굴형 images/_Avatar/180/180UD0000s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>코.입";
for ($i=10; $i < 20 ; $i++) {
$giff="190/190UD00". $i ."s.gif";
//코.입 images/_Avatar/190/190UD0001s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>눈";
for ($i=10; $i < 20 ; $i++) {
$giff="200/200UD00". $i ."s.gif";
//눈 images/_Avatar/200/200UD0000s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>선글라스";
for ($i=0; $i < 9 ; $i++) {
$giff="240/240UN000". $i ."s.gif";
//선글라스 images/_Avatar/240/240UN0004s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>귀걸이";
for ($i=0; $i < 9 ; $i++) {
$giff="260/260UN000". $i ."s.gif";
//귀걸이 images/_Avatar/260/260UN0003s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>양말";
for ($i=0; $i < 9 ; $i++) {
$giff="280/280MN000". $i ."s.gif";
//양말(MN/WN) images/_Avatar/280/280MN0003s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>신발";
for ($i=10; $i < 19 ; $i++) {
$giff="480/480MN00". $i ."s.gif";
//신발(MN/WN) images/_Avatar/480/480MN0011s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>하의";
for ($i=20; $i < 29 ; $i++) {
$giff="520/520MN00". $i ."s.gif";
//하의(MN/WN) images/_Avatar/520/520MN0037s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>목걸이";
for ($i=1; $i < 9 ; $i++) {
$giff="740/740UN000". $i ."s.gif";
//목걸이 images/_Avatar/740/740UN0011s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>상의";
for ($i=1; $i < 9 ; $i++) {
$giff="800/800MN000". $i ."s.gif";
//상의(MN/WN) images/_Avatar/800/800MN0002s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>상의외투";
for ($i=1; $i < 9 ; $i++) {
$giff="810/810MN000". $i ."s.gif";
//상의외투 images/_Avatar/810/810MN0008s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}

print"<br>헤어";
for ($i=30; $i < 39 ; $i++) {
$giff="840/840U000". $i ."s.gif";
//헤어 images/_Avatar/840/840U00037s.gif
print"<img src='http://218.145.54.39/_Avatar/$giff' border=0>";
}
print"<br>";
/*
//아바타 레벨관련 정의
// freechal.com .. 프로그램 적용된 이미지포맷
http://218.145.54.39/_Avatar/800/800MN0043s.gif
배경 http://218.145.54.39/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
*/
?>

관련자료

댓글 0
등록된 댓글이 없습니다.
목록
Today's proverb
유쾌한 사람은 자기 일에만 몰두하는 사람이 아니다. 때론 자신의 일을 전부 제쳐놓고 타인의 문제에 전력을 쏟는 열정이 있는 사람이다. 타인에게 자신의 힘을 나누어주고 마음을 열어주는 것은 자신의 삶을 행복하게 만드는 방법이다.