象歩ブログ
将棋盤に Ajax を用いる
駒台の画像表示
どうせなら ZShogi の画面表示と瓜二つにしようってことで。
駒台の表示
を改造してみた。
CSS と JavaScript で画像を自由に配置できると云うのは魅力的です。 とりあえず Zope 鯖側とクライアント・ブラウザ側で、 同じような処理ができるのは判ったので、しばし休憩。
サンプル画面の DTML を載せて置きます。 ブラウザ側では展開したソースしか表示されないと思いますので。
<body onLoad="createDiag()">
<h3>画像の再配置>/h3>
<noscript>JavaScriptが無効です!</noscript>
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td valign="top">
<table width="108" height="128" cellpadding="0" cellspacing="0" background="img/handtray1">
<tr><td align="left" valign="top">
<div id="sideTray" style="position:relative; top:0; left:0;"> </div>
</td></tr>
</table>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<dtml-in expr="['R02飛','B02角','G04金','S04銀','N04桂', 'L04香', 'P18歩']">
<dtml-let s="_['sequence-item'][0]" n="_['sequence-item'][1:3]" c="_['sequence-item'][3:]">
<tr><td>
<form action="" id="<dtml-var s>" name="<dtml-var s>" method="get">
<div style="height:6;">
<select onchange="updateHandTray('<dtml-var s>')">
<dtml-in "range(int(n) + 1)">
<option value="&dtml-sequence-item;">&dtml-sequence-item;</option>
</dtml-in>
</select> <dtml-var c>
</div>
</form>
</td></tr>
</dtml-let>
</dtml-in>
</table>
</td>
</tr>
</table>
</body>
JavaScriptのソースはブラウザのソース表示画面で直接ご覧ください。