{"id":266,"date":"2021-06-07T16:12:11","date_gmt":"2021-06-07T15:12:11","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=266"},"modified":"2021-06-08T12:55:02","modified_gmt":"2021-06-08T11:55:02","slug":"mouse-events","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/javascript\/mouse-events\/","title":{"rendered":"Mouse Events"},"content":{"rendered":"

\"\"JavaScript commands usually get executed when an\u00a0event<\/strong> happens.<\/p>\n

At Higher level you need to use three mouse related events:<\/p>\n

\"\"<\/a>onmouseover() and onmouseout()<\/h1>\n

These events are triggered when the mouse pointer moves over an element of the page, and when it moves past that element.<\/p>\n

The two events are usually used to together – onmouseover() to do something, then .onmouseout() to undo it.<\/p>\n

In this example, the background colour will change as the mouse moves over and leaves the word “special”.<\/p>\n

\r\n\r\nfunction highlight(x) {\r\n    x.style.backgroundColor = "red";\r\n}\r\n\r\nfunction removehightlight(x) {\r\n    x.style.backgroundColor = "white";\r\n}\r\n<\/pre>\n
\r\n<p onmouseover="highlight(this)" onmouseout="removehightlight(this)">I am special.<\/p>\r\n<\/pre>\n
 <\/p>\n
\"\"<\/a>onclick()<\/h1>\n
This event is triggered when an object is clicked on.<\/p>\n
In this example, a message box is displayed when the button is clicked.<\/p>\n
\r\nfunction showCopyright() {\r\n    alert("This page is copyright A Person 2021");\r\n}\r\n\r\n<\/pre>\n
\r\n<button onclick="showCopyright()">Copyright<\/button>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript commands usually get executed when an\u00a0event happens. At Higher level you need to use three mouse related events: onmouseover() and onmouseout() These events are triggered when the mouse pointer moves over an element of the page, and when it moves past that element. The two events are usually used to together – onmouseover() to do something, then .onmouseout() to undo it. In this example, the background colour will change<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-266","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":7,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/266\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/266\/revisions\/301"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}