{"id":46341,"date":"2019-09-10T03:01:29","date_gmt":"2019-09-09T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46341"},"modified":"2019-09-10T17:05:37","modified_gmt":"2019-09-10T07:05:37","slug":"onmouseover-and-onmouseout-event-monitoring-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/onmouseover-and-onmouseout-event-monitoring-tutorial\/","title":{"rendered":"Onmouseover and Onmouseout Event Monitoring Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Onmouseover and Onmouseout Event Monitoring Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/momertt.jpg\" title=\"Onmouseover and Onmouseout Event Monitoring Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Onmouseover and Onmouseout Event Monitoring Tutorial<\/p><\/div>\n<p>Perhaps you were reading yesterday&#8217;s <a title='Maths Ouija Board Quiz Primer Tutorial' href='#mobqpt'>Maths Ouija Board Quiz Primer Tutorial<\/a> and wondering &#8220;what gives with the &#8216;mo_me_rt_t.htm&#8217; name of the web application&#8221;?  Well, the original inspiration at <a target=_blank title='Moving the mouse: mouseover\/out, mouseenter\/leave' href='https:\/\/javascript.info\/mousemove-mouseover-mouseout-mouseenter-mouseleave'>&#8220;Moving the mouse: mouseover\/out, mouseenter\/leave&#8221;<\/a>, thanks, was for an Onmouseover and Onmouseout Event Monitor web application, and today we go back and add to &#8230;<\/p>\n<ul>\n<li>Maths Ouija Board Quiz &#8230; based on table cells &#8230; to &#8230;<\/li>\n<li>Onmouseover and Onmouseout Event Monitoring &#8230; based on div elements &#8230;<\/li>\n<\/ul>\n<p> &#8230; because nested hierarchical element arrangements like with HTML tables (with their cells) muddy the waters quite a bit trying to show the user a log also involving &#8230;<\/p>\n<blockquote cite='https:\/\/javascript.info\/mousemove-mouseover-mouseout-mouseenter-mouseleave'><p>\nThese events are special, because they have property relatedTarget. This property complements target. When a mouse leaves one element for another, one of them becomes target, and the other one \u2013 relatedTarget.<br \/>\n<br \/>\nFor mouseover:<br \/>\n<br \/>\nevent.target \u2013 is the element where the mouse came over.<br \/>\nevent.relatedTarget \u2013 is the element from which the mouse came (relatedTarget \u2192 target).<br \/>\nFor mouseout the reverse:<br \/>\n<br \/>\nevent.target \u2013 is the element that the mouse left.<br \/>\nevent.relatedTarget \u2013 is the new under-the-pointer element, that mouse left for (target \u2192 relatedTarget).\n<\/p><\/blockquote>\n<p> &#8230; and we want to mull over this, starting by logging event behaviour.  We allow for an HTML h1 click\/touch toggling of functionality, and we initially have the table cells show, but a toggling, maps over these table cells, position and all, with &#8230;<\/p>\n<ul>\n<li>HTML divs &#8230;<\/li>\n<li>CSS styled like table cells (ie. td) &#8230; and using &#8230;<\/li>\n<li>HTML table cell (ie. td) outerHTML property &#8230; added with &#8230;<\/li>\n<li>&#8220;overlay&#8221; favourites &#8230;\n<ol>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li>[HTML element].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>() method to arrive with properties top, left, width, height (as we did with HTML map area subelements mapped to div when we presented <a target=_blank title='Very Versus Too Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/very-versus-too-game-primer-tutorial\/'>Very Versus Too Game Primer Tutorial<\/a>)<\/li>\n<\/ol>\n<p> &#8230; and &#8220;underlay&#8221; [HTML element].style.display=&#8217;none&#8217; or [HTML element].style.visibility=&#8217;hidden&#8217;\n<\/li>\n<\/ul>\n<p>See <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html--GETME\">mo_me_rt_t.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\">dual purpose live run<\/a> link.<\/p>\n<hr>\n<p id='mobqpt'>Previous relevant <a target=_blank title='Maths Ouija Board Quiz Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/maths-ouija-board-quiz-primer-tutorial\/'>Maths Ouija Board Quiz Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Maths Ouija Board Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.jpg\" title=\"Maths Ouija Board Quiz Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Maths Ouija Board Quiz Primer Tutorial<\/p><\/div>\n<p>We&#8217;re not really using a ouija board with today&#8217;s Maths Quiz web application, but if you use the mouse or trackpad means by which to answer the Maths arithmetic, it can feel like an ouija board in play.<\/p>\n<p>We&#8217;ve arranged answers that just involve numbers so can have it that &#8230;<\/p>\n<ul>\n<li>keyboard numbers can be interpreted as part of a user&#8217;s answer &#8230;<\/li>\n<li>keyboard non-numbers can be interpreted as go check the answer &#8230;<\/li>\n<li>onmouseover or onclick of number buttons are interpreted as part of a user&#8217;s answer &#8230;<\/li>\n<li>onmouseover or onclick of &#8220;Check Answer&#8221; buttons go check the answer<\/li>\n<\/ul>\n<p>The third of those above you may wonder about double ups.  We left a setTimeout period of no doubling up between onmouseover and onclick event logics to help here.<\/p>\n<p>Today&#8217;s quiz scoring allows for bonus points for those quick to answer.  The countdown of bonus points, as above, is achieved via a setTimeout timer.<\/p>\n<p>Do you want to give today&#8217;s HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.html-GETME\">mo_me_rt_t.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mo_me_rt_t.htm\">a go<\/a>?  We hope you do!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46326' onclick='var dv=document.getElementById(\"d46326\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46326' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d46341' onclick='var dv=document.getElementById(\"d46341\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/event\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46341' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Perhaps you were reading yesterday&#8217;s Maths Ouija Board Quiz Primer Tutorial and wondering &#8220;what gives with the &#8216;mo_me_rt_t.htm&#8217; name of the web application&#8221;? Well, the original inspiration at &#8220;Moving the mouse: mouseover\/out, mouseenter\/leave&#8221;, thanks, was for an Onmouseover and Onmouseout &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/onmouseover-and-onmouseout-event-monitoring-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[1554,174,1580,342,400,476,477,576,652,673,752,3004,861,2337,1661,871,997,1238,1319],"class_list":["post-46341","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-arithmetic","tag-button","tag-cell","tag-div","tag-event","tag-game","tag-games-2","tag-html","tag-javascript","tag-keyboard","tag-mathematics","tag-maths","tag-onclick","tag-onkeypress","tag-onmouseout","tag-onmouseover","tag-programming","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46341"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=46341"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46341\/revisions"}],"predecessor-version":[{"id":46356,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46341\/revisions\/46356"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}