{"id":216,"date":"2009-07-27T22:30:06","date_gmt":"2009-07-27T21:30:06","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=216"},"modified":"2009-07-27T22:31:10","modified_gmt":"2009-07-27T21:31:10","slug":"on-mouse-events","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2009\/07\/27\/on-mouse-events\/","title":{"rendered":"On mouse events"},"content":{"rendered":"<p>Within javascript it is able to reference an HTML object so that if any &#8220;on&#8221; events happen, for example if an mouse hovers over the HTML object it is called onmouseover event and these events are capable of changing the webpage as well.<\/p>\n<p>To create an process attached to an event, you can either add the code inline to the HTML object like<\/p>\n<pre lang=\"javascript\">\r\n       <a href=\"\/\" title=\"testing\" onmouseover=\"javascript:this.style.background = 'blue'\" onmouseout=\"javascript:this.style.background = 'white'\">First Test <\/a>\r\n<\/pre>\n<p>This will change the link object &lt;a&gt; events for when the mouse hovers over the &lt;a&gt; HTML object (onmouseover) and also when the mouse leaves the &lt;a&gt; HTML object (onmouseout).<\/p>\n<p>Also with using the body HTML onload event, it is able to attach an javascript process to any object without doing inline code.<\/p>\n<pre lang=\"javascript\">\r\n       <body onload=\"javascript:objload('aid');\">\r\n<\/pre>\n<p>which is attached to any function, in this case I have attached to objload(objectID) function.<\/p>\n<p>Here is the full HTML code<\/p>\n<pre lang=\"javascript\">\r\n<html>\r\n       <head>\r\n              <script language=\"javascript\">\r\n                     \/\/\/ can do a window.onload function instead of the body onload\r\n                     window.onload = function()\r\n                     {\r\n                            \/\/objload(\"aid\");\r\n                     }\r\n\r\n                     \/\/ function to alter the object with mouse over events\r\n                     function objload(objID)\r\n                     {\r\n                            \/\/ obtain the object of the passed in element ID\r\n                            <span style='color:blue'>var<\/span> obj = document.getElementById(objID);\r\n                            \/\/ <span style='color:blue'>for<\/span> the object mouse over function (e = event)\r\n                            obj.onmouseover = function(e)\r\n                            {\r\n                                   obj.style.background = 'blue';\r\n                                   obj.style.color = 'white'\r\n                                   return true;\r\n                            }\r\n                            \/\/ <span style='color:blue'>for<\/span> the object mouse out function \r\n                            obj.onmouseout = function(e)\r\n                            {\r\n                                   obj.style.background = 'white';\r\n                                   obj.style.color = 'blue';\r\n                            }\r\n                     }\r\n              <\/script>\r\n       <\/head>\r\n       <!-- can do onload event with the standard html -->\r\n       <body onload=\"javascript:objload('aid');\">\r\n              <a href=\"\/\" title=\"testing\" onmouseover=\"javascript:this.style.background = 'blue'\" onmouseout=\"javascript:this.style.background = 'white'\">First Test <\/a>\r\n              <p>\r\n              <a href=\"\/\" title=\"test\" id=\"aid\">Second test<\/a>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Within javascript it is able to reference an HTML object so that if any &#8220;on&#8221; events happen, for example if an mouse hovers over the HTML object it is called onmouseover event and these events are capable of changing the webpage as well. To create an process attached to an event, you can either add &hellip; <a href=\"https:\/\/www.codingfriends.com\/index.php\/2009\/07\/27\/on-mouse-events\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">On mouse events<\/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":[16],"tags":[402,398,400],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-linux","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":2,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}