アバターの仕組み

アバターって、自分のキャラクターに容姿を自由に変更できるあれね。

Yahooのアバターってどうなってるんだろうと、興味本位からちょっとみてみると

透過画像を重ねて、部分的に入れ替えれるようにしてる。

GDとか使って、まるまる画像生成ってしてるのかとおもったら

意外と単純。（よく考えたらアニメーションGIFとか、そのまま合成できないからあたりまえか。。。）

<style>
div{
width :100px;
height: 100px;
position:absolute;
window.  }
#img1 {background: url(img1.gif) transparent no-repeat; z-index:10;}
#img1 {background: url(img2.gif) transparent no-repeat; z-index:20;}
#img1 {background: url(img3.gif) transparent no-repeat; z-index:30;}
#img1 {background: url(img4.gif) transparent no-repeat; z-index:40;}
#img1 {background: url(img5.gif) transparent no-repeat; z-index:50;}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>

こんな感じのHTMLに img1.gif ～ img5.gif の同じサイズの透過GIFでも用意したら

できあがり。

要は、その画像の組み合わせが大変だってことやね。

コンテンツ生成に高額な費用がかかるのがネック！