アバターの仕組み

アバターって、自分のキャラクターに容姿を自由に変更できるあれね。
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でも用意したら
できあがり。
要は、その画像の組み合わせが大変だってことやね。
コンテンツ生成に高額な費用がかかるのがネック！