Ajax(3) - Ajax学習中(2)

　Ajaxに対する学習報告。

　Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html

を引き続き読み進めて、第三章の「3. ゲームのマップを表示する」まで進む。
　その中でCSSが出てきて、またしてもちょいストップ。
　このスタイルシートのおかげで、半透明gifファイルを重ねて表示できるようになっており、斜めから見下ろしたようなマップの表示を実現している。

for(var i=0; i<MapHeight; i++)
{
　for(var j=0; j<MapWidth; j++)
　{
　　mapNumber = lineData[i].charAt(j);

　　// スタイルシート用計算
　　mx = MapWidth * blockSize + j*blockSize - i*blockSize;
　　my = i*blockSize + screenOffset;

　　resultImage += '<img src="images/'+mapNumber+'.gif" class="mapBlock" style="top:'+my+'px;left:'+mx+'px">';
　}
　resultImage += "<br>";
}

<!-- スタイルシート -->
<style type="text/css"><!--
.mapBlock{
width:64px;
height:32px;
position:absolute;
}
--></style>