MouseEvent.image.map.area.html (2017B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title id='desc'> MouseEvent event on IMG element with MAP and AREA elements</title> 5 <script type="text/javascript"> 6 var PassTest = function() 7 { 8 document.getElementById("testresult").firstChild.data = "PASS"; 9 } 10 11 var FailTest = function() 12 { 13 document.getElementById("testresult").firstChild.data = "FAIL"; 14 } 15 16 var TARGET; 17 var EVENT = "click"; 18 19 function TestEvent(evt) 20 { 21 evt.preventDefault(); 22 23 if ((EVENT == evt.type) && (TARGET === evt.target)) 24 { 25 PassTest(); 26 } 27 else 28 { 29 FailTest(); 30 } 31 } 32 33 window.onload = function(evt) 34 { 35 try 36 { 37 TARGET = document.getElementById("target"); 38 document.addEventListener(EVENT, TestEvent, false); 39 } 40 catch(ex) 41 { 42 FailTest(); 43 } 44 } 45 </script> 46 </head> 47 <body> 48 <h3>DOM Events</h3> 49 <h4> 50 Test Description: MouseEvent event fires on the AREA element when click the MAP AREA on an image 51 </h4> 52 53 <img src="./support/iepreview.png" usemap="#ieMap" /> 54 55 <map name="ieMap"> 56 <area id="target" href="MouseEvent.image.map.area.html" shape="rect" coords="140 180 250 250" title="Arrow" /> 57 </map> 58 59 <p id="manualsteps"> 60 Steps: 61 <ol> 62 <li> Click at the arrow pointer symbol on the bottom-right corner of the image. 63 </ol> 64 </p> 65 66 <p>Test passes if the word "PASS" appears below after following the above steps.</p> 67 <div>Test result: </div> 68 <div id='testresult'>FAIL</div> 69 </body> 70 </html>