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 type="text/javascript" src="../../../dist/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>