{"id":8720,"date":"2014-07-31T05:05:00","date_gmt":"2014-07-30T19:05:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8720"},"modified":"2015-06-07T08:53:52","modified_gmt":"2015-06-06T22:53:52","slug":"htmljavascript-overlay-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-overlay-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Overlay Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8720#\" onclick=\"do_our_animation();\"><img decoding=\"async\" id='d_o_a' style=\"float:left;border: 15px solid pink;\"  alt=\"HTML\/Javascript Overlay Primer Tutorial ... click shows animation which is best seen with window scrunched up to show no deep red background colour ahead of clicking\" src=\"http:\/\/www.rjmprogramming.com.au\/Javascript\/OverlayAnimation\/do_our_animation.jpg\" title=\"HTML\/Javascript Overlay Primer Tutorial... click shows animation which is best seen with window scrunched up to show no deep red background colour ahead of clicking\"  onmouseover=\" document.getElementById('d_o_a').src = document.getElementById('d_o_a').src.replace('.jpg','.PNG').replace('.png','.GIF').replace( '.gif','.jpg').replace( '.PNG','.png').replace( '.GIF','.gif');    \" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Overlay Primer Tutorial... click shows animation which is best seen with window scrunched up to show no deep red background colour ahead of clicking<\/p><\/div>\n<p><script type=\"text\/javascript\">function do_our_animation() {\n   var topis = 0, leftis = 0, widthis = 940, heightis = 198, cimage = \"\", nextis = eval((Math.abs(0) + 1) % 12);\n   \/\/alert(document.body.innerHTML.indexOf('my' + 'overlay'));\n   if (document.body.innerHTML.indexOf('my' + 'overlay') == -1) {\n    if (document.getElementById(\"mytopimage\").top == undefined) {\n     topis = document.getElementById(\"mytopimage\").clientTop;\n    } else {\n     topis = document.getElementById(\"mytopimage\").top;\n    }\n    if (document.getElementById(\"mytopimage\").left == undefined) {\n     leftis = document.getElementById(\"mytopimage\").clientLeft;\n    } else {\n     leftis = document.getElementById(\"mytopimage\").left;\n    }\n    if (document.getElementById(\"mytopimage\").width == undefined) {\n     widthis = document.getElementById(\"mytopimage\").clientWidth;\n    } else {\n     widthis = document.getElementById(\"mytopimage\").width;\n    }\n    if (document.getElementById(\"mytopimage\").height == undefined) {\n     heightis = document.getElementById(\"mytopimage\").clientHeight;\n    } else {\n     heightisis = document.getElementById(\"mytopimage\").height;\n    }\n    heightis = 285;\n    \/\/alert(topis + \" \" + leftis + \" \" + widthis + \" \" + heightis);\n    \/\/cimage = \"<\" + \"img width='\" + eval(widthis + 40) + \"' height='\" + eval(heightis + 10) + \"' alt='Our animation' \";\n    cimage = \"<\" + \"img onclick=' location.href=\" + '\"' + \"http:\/\/rjmprogramming.com.au\/wordpress\" + '\"' + \";' width='100%' height='\" + eval(heightis + 10) + \"' alt='Our animation' \";\n    cimage = cimage + \" src='overthetop\" + eval(Math.abs(nextis)) + \".png' id='my\" + \"overlay' style=' z-index:999; opacity:0.7; position:absolute;\";\n    nextis = eval((Math.abs(nextis) + 1) % 12);\n    cimage = cimage + \" top:\" + topis + \"; left:\" + leftis + \";'\" + \">\" + \"<\" + \"\/img\" + \">\" + \"<\" + \"input type='hidden' id='nextis' title='0' style='display:none;' value='\" + nextis + \"'\" + \">\" + \"<\" + \"\/input\" + \">\";\n    \/\/alert(cimage);\n    \/\/document.title = cimage;\n    document.getElementById(\"site-title\").innerHTML = cimage + document.getElementById(\"site-title\").innerHTML;\n    \/\/window.scroll.left = 0;\n    document.body.style.backgroundPosition=\"0% 0%\";\n   } else {\n    nextis = document.getElementById(\"nextis\").value;\n    document.getElementById(\"my\" + \"overlay\").src = \"overthetop\" + eval(nextis) + \".png\";\n    nextis = eval((Math.abs(nextis) + 1) % 12);\n    if (eval(nextis) == 0) {\n       if (document.getElementById(\"nextis\").title.length < 5) {\n         nextis = \"7\";\n         document.getElementById(\"nextis\").title = document.getElementById(\"nextis\").title + \"0\";\n       } else {\n         document.getElementById(\"nextis\").title = \"0\";\n       }\n    }\n    document.getElementById(\"nextis\").value = nextis;\n   }\n   setTimeout(do_our_animation, 1000);\n}<\/script>Today we're continuing on with the HTML <i>overlay<\/i> ideas and showed, yesterday, with <a target=_blank title='HTML\/CSS Overlay Primer Tutorial' href='#hcopt'>HTML\/CSS Overlay Primer Tutorial<\/a>, some CSS to do with the idea of overlaying HTML elements, and today we give Javascript a turn, and show some animation as well, using the Javascript function <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' title='Javascript setTimeout information from w3schools'><i>setTimeout<\/i><\/a> used in a recursive way (you might remember this being important with <a target=_blank title='HTML\/Javascript Canvas Rummy Card Game Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7092'>HTML\/Javascript Canvas Rummy Card Game Primer Tutorial<\/a>).  It features a cheesy welcome that moves down and out of view to become an even more cheesy <a target=_blank href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm' title='HTML marquee tag information'>marquee<\/a> style <i>Eat at Joe's<\/i>.  We talked a bit about this approach with <a target=_blank title='Javascript in Your WordPress Post Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7092'>Javascript in Your WordPress Post Primer Tutorial<\/a> too.<\/p>\n<p>Try a <a  href=\"#\" onclick=\"do_our_animation();\">live run<\/a> click, but please note that the click shows animation which is best seen with your web browser window scrunched up to show no deep red background colour ahead of clicking ... some room for your improvement!<\/p>\n<p>The prototype HTML and Javascript source code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Javascript\/OverlayAnimation\/do_our_animation.html_GETME' title='do_our_animation.html'>do_our_animation.html<\/a> and its <i>\"proof of concept\"<\/i> unit test <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Javascript\/OverlayAnimation\/do_our_animation.html' title='do_our_animation.html'>live run<\/a> will show you the background to the idea, and it may pan out that you might want to contrast that code with the WordPress post code below, because it changed quite a bit to do with WordPress blog styling for the TwentyTen theme we use on this blog (will bid you <i>happy blogging<\/i> for now ... chow ... after the <i>Did you know?<\/i>, that is):<\/p>\n<p><codeblock><i>&lt;script type=\"text\/javascript\"&gt;function do_our_animation() {<br \/>\n   var topis = 0, leftis = 0, widthis = 940, heightis = 198, cimage = \"\", nextis = eval((Math.abs(0) + 1) % 12);<br \/>\n   if (document.body.innerHTML.indexOf('my' + 'overlay') == -1) {<br \/>\n    if (document.getElementById(\"mytopimage\").top == undefined) {<br \/>\n     topis = document.getElementById(\"mytopimage\").clientTop;<br \/>\n    } else {<br \/>\n     topis = document.getElementById(\"mytopimage\").top;<br \/>\n    }<br \/>\n    if (document.getElementById(\"mytopimage\").left == undefined) {<br \/>\n     leftis = document.getElementById(\"mytopimage\").clientLeft;<br \/>\n    } else {<br \/>\n     leftis = document.getElementById(\"mytopimage\").left;<br \/>\n    }<br \/>\n    if (document.getElementById(\"mytopimage\").width == undefined) {<br \/>\n     widthis = document.getElementById(\"mytopimage\").clientWidth;<br \/>\n    } else {<br \/>\n     widthis = document.getElementById(\"mytopimage\").width;<br \/>\n    }<br \/>\n    if (document.getElementById(\"mytopimage\").height == undefined) {<br \/>\n     heightis = document.getElementById(\"mytopimage\").clientHeight;<br \/>\n    } else {<br \/>\n     heightisis = document.getElementById(\"mytopimage\").height;<br \/>\n    }<br \/>\n    heightis = 285;<br \/>\n    \/\/alert(topis + \" \" + leftis + \" \" + widthis + \" \" + heightis);<br \/>\n    \/\/cimage = \"&lt;\" + \"img width='\" + eval(widthis + 40) + \"' height='\" + eval(heightis + 10) + \"' alt='Our animation' \";<br \/>\n    cimage = \"&lt;\" + \"img onclick=' location.href=\" + '\"' + \"http:\/\/rjmprogramming.com.au\/wordpress\" + '\"' + \";' width='100%' height='\" + eval(heightis + 10) + \"' alt='Our animation' \";<br \/>\n    cimage = cimage + \" src='overthetop\" + eval(Math.abs(nextis)) + \".png' id='my\" + \"overlay' style=' z-index:999; opacity:0.7; position:absolute;\";<br \/>\n    nextis = eval((Math.abs(nextis) + 1) % 12);<br \/>\n    cimage = cimage + \" top:\" + topis + \"; left:\" + leftis + \";'\" + \"&gt;\" + \"&lt;\" + \"\/img\" + \"&gt;\" + \"&lt;\" + \"input type='hidden' id='nextis' title='0' style='display:none;' value='\" + nextis + \"'\" + \"&gt;\" + \"&lt;\" + \"\/input\" + \"&gt;\";<br \/>\n    \/\/alert(cimage);<br \/>\n    \/\/document.title = cimage;<br \/>\n    document.getElementById(\"site-title\").innerHTML = cimage + document.getElementById(\"site-title\").innerHTML;<br \/>\n    \/\/window.scroll.left = 0;<br \/>\n    document.body.style.backgroundPosition=\"0% 0%\";<br \/>\n   } else {<br \/>\n    nextis = document.getElementById(\"nextis\").value;<br \/>\n    document.getElementById(\"my\" + \"overlay\").src = \"overthetop\" + eval(nextis) + \".png\";<br \/>\n    nextis = eval((Math.abs(nextis) + 1) % 12);<br \/>\n    if (eval(nextis) == 0) {<br \/>\n       if (document.getElementById(\"nextis\").title.length < 5) {\n         nextis = \"7\";\n         document.getElementById(\"nextis\").title = document.getElementById(\"nextis\").title + \"0\";\n       } else {\n         document.getElementById(\"nextis\").title = \"0\";\n       }\n    }\n    document.getElementById(\"nextis\").value = nextis;\n   }\n   setTimeout(do_our_animation, 1000);\n}&lt;\/script&gt;<\/i><\/codeblock><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>The tutorial picture today features the <a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/' title='Firefox home page'>Firefox<\/a> web browser and a very useful add-on called <a target=_blank title='Firebug home page' href='https:\/\/getfirebug.com\/'>Firebug<\/a> which you may want more information about <a target=_blank title='Firebug tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firebug'>here<\/a>, which is commonly used to debug client-side Javascript and HTML.   As for today's usage, Firebug is also extremely useful in deconstructing how a web page was created.   The other simple wonderful tool for this is the web browser's equivalent menu command like View->Page Source (or sometimes equivalent of right-click Page Source).   Firebug has a sister product called <a target=_blank title='FirePHP home page' href='http:\/\/www.firephp.org\/'>FirePHP<\/a> which helps debug server-side PHP and Ajax <a target=_blank title='FirePHP tutorials at this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Firephp'>work<\/a>.<\/p>\n<hr \/>\n<p id=\"hcopt\">Previous relevant <a target=_blank title='HTML\/CSS Overlay Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8702'>HTML\/CSS Overlay 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\/zindex_positionabsolute_overlay.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML\/CSS Overlay Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zindex_positionabsolute_overlay.jpg\" title=\"HTML\/CSS Overlay Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">HTML\/CSS Overlay Primer Tutorial<\/p><\/div>\n<p>A previous <a target=_blank href=\"#glpt\">Gimp Layers Primer Tutorial<\/a> (as shown below) gave you an insight into the massive possibilities of using a sophisticated image editor and use layers with various amounts of transparency, especially suited to use with png image files, and today we build on that idea to present another idea along those same wavelengths (\"permanent wave\" for those having a bad hair day or have a hand that wants to <a target=_blank href='https:\/\/www.flickr.com\/photos\/alextsolomon\/2708602175\/' title='the hand that waves'>wave<\/a> ... don't we all?!) in the use of HTML and CSS and use the concepts of:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='z-index information from w3schools'><i>z-index<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp' title='position:absolute information from w3schools'><i>position:absolute<\/i><\/a><\/li>\n<li><a target=_blank href='http:\/\/www.w3schools.com\/css\/css_image_transparency.asp' title='opacity information from w3schools'><i>opacity<\/i><\/a><\/li>\n<li>same size for elements (optional idea, but good for ease of use)<\/li>\n<\/ul>\n<p>In that previous <a target=_blank href=\"#glpt\">Gimp Layers Primer Tutorial<\/a> (as shown below) transparency (or its obverse, opacity) can be used to have the one image achieve several \"ends\" (ie. purposes).  The same thing happens today by overlaying an image on top of a Google Line Chart plotting a parabola (presented in an iframe, whose dimensions are arranged to match the dimensions and positioning of our image ... hence the <i>\"optional idea\"<\/i> above), to have the image content help out the Google chart, to clarify axis names and hence, help refine the purpose of the chart.<\/p>\n<p>In that previous <a target=_blank href=\"#glpt\">Gimp Layers Primer Tutorial<\/a> (as shown below) we mentioned that lots of those classic \"Photoshopping\" techniques can be achieved in Gimp, and some other <a target=_blank title='Gimp tutorials here' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=4'>tutorials<\/a> at this blog touch on that.  What we can say today is that CSS can help out as well, to achieve similar ends, or you can adopt a combination of approaches, perhaps.<\/p>\n<p>In that previous <a target=_blank href=\"#glpt\">Gimp Layers Primer Tutorial<\/a> (as shown below) we imagined what the concept of a layer was with regard to image manipulation.   Today we see it in terms of layering HTML elements using the CSS z-index idea ... the bigger the z-index the closer the \"layer\" is to the viewer's eye (read about the Earth <a target=_blank title='Earth geoid information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Geoid'>geoid<\/a> here and as a space traveller you'd be tempted to give Mt Everest a z-index of about <i>z-index:8000<\/i> and the Dead Sea a z-index of <i>z-index:-418<\/i> ... except that Mt Everest doesn't sit on top of the Dead Sea, the last time I did the R&D ... <a target=_blank title=\"Nepal and Isreal's Mt Everest and Dead Sea stamp\" href='https:\/\/www.google.com.au\/search?q=Mt+Everest+on+top+of+the+Dead+Sea+stamp&#038;client=firefox-a&#038;hs=BJb&#038;rls=org.mozilla:en-US:official&#038;channel=sb&#038;tbm=isch&#038;imgil=MxRg2pFhmpdZOM%253A%253Bhttps%253A%252F%252Fencrypted-tbn0.gstatic.com%252Fimages%253Fq%253Dtbn%253AANd9GcT7YagMzhRzEt7mrELHeg7_LYMAEf_lXiy71C01EMHwKHCP_LBQfA%253B286%253B379%253ByEc78MPZuV2IMM%253Bhttp%25253A%25252F%25252Fwww.mountainstamp.com%25252FIsrael%2525252520pages%25252FDead%2525252520Sea.html&#038;source=iu&#038;usg=__r_0izsD1amxdL12Pix2GC5wKRiw%3D&#038;sa=X&#038;ei=uRDYU-HfBcOj8AXuwIHYBw&#038;ved=0CCgQ9QEwAw&#038;biw=1280&#038;bih=673#facrc=_&#038;imgdii=_&#038;imgrc=MxRg2pFhmpdZOM%253A%3ByEc78MPZuV2IMM%3Bhttp%253A%252F%252Fwww.mountainstamp.com%252FNepal%252520picture%252FNepal%2525202012%252520Mount%252520Everest%252520Dead%252520Sea%252520stamp%252520joint%252520issue%252520Nepal%252520and%252520Israel.jpg%3Bhttp%253A%252F%252Fwww.mountainstamp.com%252FIsrael%252520pages%252FDead%252520Sea.html%3B286%3B379'>mind you?!<\/a> ... <i>z-index:<strike>8000<\/strike>8848<\/i> vs <i>z-index:<strike>-418<\/strike>-422<\/i>), and then we allow opacities less than one (one is opaque, zero is transparent) to make room for multiple layer see through effects.   The use of <i>position:absolute<\/i> opens the door to the web browser sort of being fooled into doing something that doesn't come naturally to it ... overlay HTML elements (possibly) on top of each other ... another CSS parameter you may be interested in for overlay is the use of negative values for <a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_margin-top.asp' title='margin-top information from w3schools'><i>margin-top<\/i><\/a>.<\/p>\n<p>Link to some HTML and CSS programming source code is here and you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zindex_positionabsolute_overlay.html_GETME\" title=\"zindex_positionabsolute_overlay.html\">zindex_positionabsolute_overlay.html<\/a> and try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zindex_positionabsolute_overlay.html\" title=\"Live Run\">live run<\/a> while you are at it.  In isolation the overlay is pretty simple and can be called  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/xaxis.png\" title=\"xaxis.png\">xaxis.png<\/a><\/p>\n<hr \/>\n<p id=\"glpt\">Previous relevant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5366\">Gimp Layers 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\/GIMP\/Layers\/GimpLayers.m4v\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Layers Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Layers\/GimpLayers.jpg\" title=\"Gimp Layers Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Gimp Layers Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that gives you an insight into the massive possibilities of using a sophisticated image editor and use layers with various amounts of transparency, especially suited to use with png image files.<\/p>\n<p>Transparency (or its obverse, opacity) can be used to have the one image achieve several \"ends\" (ie. purposes).  Although it is a bit of a clumsy example in the tutorial, you can see that the technique can be used for artistic purposes ... often called \"Photoshopping\" (named after the more famous, and also brilliant, rival product, Photoshop).<\/p>\n<p>Lots of those classic \"Photoshopping\" techniques can be achieved in Gimp, and some other <a target=_blank title='Gimp tutorials here' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=4'>tutorials<\/a> at this blog touch on that.<\/p>\n<p>Am sure you can imagine what the concept of a layer is with regard to image manipulation.   Within Gimp, for beginners not used to this concept, you find yourself underestimating and underplaying what can be achieved with the various layers of a multi-layered image.   In simplistic terms each layer has the functionality in Gimp to be treated as a whole new image, and this is the best way to think of it when trying to achieve what you want to achieve with Gimp.<\/p>\n<p>Link to Gimp \"spiritual home\" ... <a target=_blank href='http:\/\/www.gimp.org' title='Gimp'>here<\/a>.<br \/>\nLink to Gimp forum ... <a target=_blank href='http:\/\/gimpforums.com\/' title='Google Geo Charts'>here<\/a>.<\/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='#d5366' onclick='var dv=document.getElementById(\"d5366\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=4\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5366' 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='#d8702' onclick='var dv=document.getElementById(\"d8702\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8702' 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='#8720' onclick='var dv=document.getElementById(\"d8720\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8720' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;re continuing on with the HTML overlay ideas and showed, yesterday, with HTML\/CSS Overlay Primer Tutorial, some CSS to do with the idea of overlaying HTML elements, and today we give Javascript a turn, and show some animation as &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-overlay-primer-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":[4,12,37],"tags":[84,151,327,438,576,652,894,997,1319,1456],"class_list":["post-8720","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-blog","tag-did-you-know","tag-firebug","tag-html","tag-javascript","tag-overlay","tag-programming","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8720"}],"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=8720"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8720\/revisions"}],"predecessor-version":[{"id":15298,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/8720\/revisions\/15298"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=8720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=8720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=8720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}