1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <meta http-equiv=
"Content-type" content=
"text/html; charset=utf-8">
7 <style type=
"text/css" media=
"screen">
8 body { margin:
1px; padding:
5px; }
9 table { border:
2px solid #
000; }
10 th, td { border:
1px solid #
000; width:
100px; height:
100px; }
11 #marker { position: absolute; border:
2px solid #
000; width:
50px; height:
50px; background: #ccc; }
13 <script src=
"../../jquery.js"></script>
14 <script type=
"text/javascript" charset=
"utf-8">
16 $(
"table, th, td").click(function() {
17 $(
"#marker").css( $(this).offset() );
27 <th id=
"th-1">th-
1</th>
28 <th id=
"th-2">th-
2</th>
29 <th id=
"th-3">th-
3</th>
34 <td id=
"td-1">td-
1</td>
35 <td id=
"td-2">td-
2</td>
36 <td id=
"td-3">td-
3</td>
40 <div id=
"marker"></div>
41 <p class=
"instructions">Click the white box to move the marker to it.
</p>