| <?xml version="1.0"?> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <title>Rectangles</title> |
| <script type="text/javascript"> |
| function appendMessage(message) { |
| document.getElementById('result').innerHTML += message |
| + " "; |
| } |
| </script> |
| <style type="text/css"> |
| #r1 { |
| position: absolute; |
| background-color: lightblue; |
| left: 100px; |
| top: 100px; |
| width: 100px; |
| height: 50px; |
| } |
| #r2 { |
| position: absolute; |
| background-color: red; |
| left: 2500px; |
| top: 50px; |
| width: 80px; |
| height: 50px; |
| } |
| #r3 { |
| position: absolute; |
| background-color: yellow; |
| left: 60px; |
| top: 1500px; |
| width: 80px; |
| height: 50px; |
| } |
| #r4 { |
| position: absolute; |
| background-color: cyan; |
| left: 220px; |
| top: 180px; |
| width: 100px; |
| height: 50px; |
| } |
| #r5 { |
| position: absolute; |
| background-color: blue; |
| left: 60px; |
| top: 1600px; |
| width: 80px; |
| height: 50px; |
| } |
| #r6 { |
| position: absolute; |
| background-color: green; |
| left: 2581px; |
| top: 50px; |
| width: 80px; |
| height: 50px; |
| } |
| #result { |
| border: 10; |
| padding: 5; |
| background-color: grey; |
| position: absolute; |
| left: 20px; |
| top: 30px; |
| width: 400px; |
| height: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="result"></div> |
| <div id="r1" onclick="appendMessage('First')">First Target</div> |
| <div id="r2" onclick="appendMessage('Second')">Second Target</div> |
| <div id="r3" onclick="appendMessage('Third')">Third Target</div> |
| <div id="r4" onclick="appendMessage('Fourth')">Fourth Target</div> |
| <div id="r5" onclick="appendMessage('OOPS2')">Not a Target</div> |
| <div id="r6" onclick="appendMessage('OOPS')">Not a Target</div> |
| </body> |
| </html> |
