Okay, the core idea is replacing image with DOM manipulation via JavaScript when user changes some thing. Such as...
- Moving chequer
- Picking up dice
- Doubling
- Take/Pass on Cube
- Placing chequers to set up position
jQuery helps me a lot.
<html>
<head>
<title>sample</sample>
</head>
<body>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#debug').val('debugger ready!\n');
$('#jsboard area').mousedown(function(){
$('#debug').val('mousedown at ' + $(this).attr("alt") + ' \n');
})
});
-->
</script>
<div>
<img src="http://image.backgammonbase.com/image?gnubgid=4PPgAQPgc%2BQBIg%3AcAl7AAAAAAAA&height=262&width=341&css=nature&format=png" alt="4PPgAQPgc+QBIg:cAl7AAAAAAAA"
usemap="#jsboard" width="341" height="262">
<!--
point {width: 18; height:88}
-->
<map name="jsboard" id="jsboard">
<!--
point:data(13) {x: 25 ; y: 5 ; flip: True }
-->
<area id="13pt" shape="rect" coords="25,5,43,93" nohref="nohref" alt="13pt">
<!--
point:data(7) { x: 115 ; y: 139 }
-->
<area id="7pt" shape="rect" coords="115,139,133,227" nohref="nohref" alt="7pt">
<!--
bar {width: 25; height: 112; background: #583017}
bar[player=you] {x:133; y:116}
bar[player=you] chequer{x:137; y:135 ;y_offset: 18; max_count:4}
-->
<area id="yourbar" shape="rect" coords="133,116,158,228" nohref="nohref" alt="yourbar">
</map>
</div>
<div>
<form>
<textarea cols="40" rows="10" id="debug">
</textarea>
</form>
</div>
</body>
</html>
