{"id":69297,"date":"2025-08-01T03:01:00","date_gmt":"2025-07-31T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69297"},"modified":"2025-08-02T10:06:12","modified_gmt":"2025-08-02T00:06:12","slug":"animated-plane-game-user-content-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-user-content-sharing-tutorial\/","title":{"rendered":"Animated Plane Game User Content Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game User Content Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_more.gif\" title=\"Animated Plane Game User Content Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game User Content Sharing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated Plane Game Primer Tutorial' href='#apgpt'>Animated Plane Game Primer Tutorial<\/a> set up five &#8220;nouns&#8221; of interest &#8230;<\/p>\n<ul>\n<li>trees<\/li>\n<li>plane<\/li>\n<li>gymnast<\/li>\n<li>clouds<\/li>\n<li>ground<\/li>\n<\/ul>\n<p> &#8230; each of which has a relationship to a piece of media content.  The <i>border-image<\/i> (ie. ground) content aspects we allow a user to define emoji text for, but the rest are associated with a data URI or URL.<\/p>\n<p>Today&#8217;s work is to allow the user to specify these &#8220;content&#8221; data items themselves, as well as share this via email or SMS to another user, with those user &#8220;content&#8221; data items recreated for the recipient user clicking the email or SMS link containing those hashtagged user data components.  Later we hope to expand the functionality more, from today&#8217;s &#8230;<\/p>\n<p><code><br \/>\n  function getsrc(fromoh) {<br \/>\n     var forvpre='Currently this content points at ... ' + String.fromCharCode(10);<br \/>\n     var forvsuf=String.fromCharCode(10) + 'Enter an alternative content URL (can be clipart style data URI you see often using Google Image (Copy Image Address via right click) Searches) ... or ... ' + String.fromCharCode(10) + String.fromCharCode(10) + '1[:URL] for trees, 2[:URL] for plane, 3[:URL] for gymnast, 4[:URL] for clouds, 5[:emoji(s)] for ground, E for email, S for SMS';<br \/>\n     if (fromoh.indexOf(' src=\"\/\/') != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(' src=\"')[1].split('\"')[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src='\/\/\") != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(\" src='\")[1].split(\"'\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src=\/\/\") != -1) {<br \/>\n       return forvpre + document.URL.split('\/\/')[0] + fromoh.split(\" src=\")[1].split(\" \")[0].split(\"&gt;\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(' src=\"') != -1) {<br \/>\n       return forvpre + fromoh.split(' src=\"')[1].split('\"')[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src='\") != -1) {<br \/>\n       return forvpre + fromoh.split(\" src='\")[1].split(\"'\")[0] + forvsuf;<br \/>\n     } else if (fromoh.indexOf(\" src=\") != -1) {<br \/>\n       return forvpre + fromoh.split(\" src=\")[1].split(\" \")[0].split(\"&gt;\")[0] + forvsuf;<br \/>\n     }<br \/>\n     return fromoh;<br \/>\n  }<br \/>\n  <br \/>\n  function yourprompt(ino, intlis) {<br \/>\n    var ei=-1, si=-1;<br \/>\n    isac=true;<br \/>\n    var opsd=prompt(getsrc(ino.outerHTML), '');<br \/>\n    if (opsd == null) { isac=false; return false; }<br \/>\n    if (opsd.trim() != '') {<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n  <br \/> <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    } else {<br \/>\n      setTimeout(function(){ ino.click(); }, 100); return true;<br \/>\n    }<br \/>\n    isac=false;<br \/>\n    return false;<br \/>\n  }<br \/>\n    <br \/>\n  function anyprompt(opsd) {<br \/>\n    if (opsd.trim() != '') {<br \/>\n      opsd=opsd;<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n    <br \/>\n  function ourprompt(ino, intlis) {<br \/>\n    var ei=-1, si=-1;<br \/>\n    isac=true;<br \/>\n    var opsd=null;<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    opsd=prompt(intlis + String.fromCharCode(10) + String.fromCharCode(10) + intlis, '');<br \/>\n    } else {<br \/>\n    opsd=prompt(getsrc(document.getElementById('myimg').outerHTML), '');<br \/>\n    }<br \/>\n    if (opsd == null) { isac=false; return false; }<br \/>\n    if (opsd.trim() != '') {<br \/>\n      opsd=opsd;<br \/>\n      switch (opsd.substring(0,1).toLowerCase().replace('+','s')) {<br \/>\n        case '1': \/\/ trees<br \/>\n          if ((opsd + ' ').substring(0,2) == '1:') {<br \/>\n            treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myimg').src=('' + (opsd + ' ').substring(2) + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where trees are.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '2': \/\/ plane<br \/>\n          if ((opsd + ' ').substring(0,2) == '2:') {<br \/>\n            planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('myif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where plane is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 planealt='&planealt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '3': \/\/ gymnast<br \/>\n          if ((opsd + ' ').substring(0,2) == '3:') {<br \/>\n            gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n            document.getElementById('mytwoif').style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps clipart via Google image search) data URI or URL suiting where gymnast is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 gymnastalt='&gymnastalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('mytwoif').style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '4': \/\/ clouds<br \/>\n          if ((opsd + ' ').substring(0,2) == '4:') {<br \/>\n            cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.style.backgroundImage='url(' + ((opsd + ' ').substring(2)).replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (perhaps via Google image search) data URI or URL suiting where cloud background image is.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 cloudsalt='&cloudsalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.style.backgroundImage='url(' + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + ')';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n        <br \/>\n        case '5': \/\/ ground<br \/>\n          if ((opsd + ' ').substring(0,2) == '5:') {<br \/>\n            groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n            document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + (opsd + ' ').substring(2) + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n          } else {<br \/>\n            opsd=prompt('Enter your (probably quite long) emoji (we are guessing) border image text.', '');<br \/>\n            if (opsd != null) {<br \/>\n              if (opsd != '') {<br \/>\n                 groundalt='&groundalt=' + encodeURIComponent(opsd);<br \/>\n                 document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-image:url(\"' + prefixbiu + opsd.replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'') + suffixbiu + '\") !important; &lt;\/sty' + 'le&gt;'<br \/>\n              } else {<br \/>\n                 groundalt='&groundalt='; \/\/ + encodeURIComponent(opsd);<br \/>\n                 document.body.style.borderImage='none';<br \/>\n                 document.body.style.borderBottom='1px solid transparent';<br \/>\n                 document.body.style.borderBottomWidth='0px';<br \/>\n                 \/\/document.body.innerHTML+='&lt;sty' + 'le&gt; body { border-bottom-width:0px !important; } &lt;\/sty' + 'le&gt;';<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n          break;<br \/>\n            <br \/>\n        case 'e': \/\/ email<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.trim().indexOf('@') != -1) {<br \/>\n                anchor.href = 'mailto:' + opsd.split('@')[0].split(' ')[eval(-1 + opsd.split('@')[0].split(' ').length)] + opsd.split(opsd.split('@')[0])[1].split(' ')[0] + '?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:?subject=My%20Animation&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n            <br \/>\n        case 's': \/\/ SMS<br \/>\n                opsd=opsd.replace(\/\\:\/g,' ');<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (opsd.substring(0,1).toLowerCase() == '+') {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[0] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else if (opsd.indexOf(' ') != -1) {<br \/>\n                anchor.href = 'sms:' + opsd.split(' ')[eval(-1 + opsd.split(' ').length)] + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                } else {<br \/>\n                anchor.href = 'sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + treesalt + planealt + gymnastalt + cloudsalt + groundalt);<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n          break;<br \/>\n        <br \/>\n        default:<br \/>\n          if (opsd != null) {<br \/>\n              if (opsd.trim() != '') {<br \/>\n                 treesalt='&treesalt=' + encodeURIComponent(opsd);<br \/>\n                 document.getElementById('myimg').src=('' + opsd + '').replace(\/^http\\:\/g,'').replace(\/^https\\:\/g,'');<br \/>\n              }<br \/>\n          }<br \/>\n          break;<br \/>\n      }<br \/>\n    } else {<br \/>\n      setTimeout(function(){ ino.click(); }, 100); return true;<br \/>\n    }<br \/>\n    isac=false;<br \/>\n    return false;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-------GETME\" rel=\"noopener\">&#8220;eighth draft&#8221;<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html\" rel=\"noopener\">Animated Plane Game<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-user-content-sharing-tutorial\/' rel=\"noopener\">Animated Plane Game User Content Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apgpt'>Previous relevant <a target=\"_blank\" title='Animated Plane Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-primer-tutorial\/' rel=\"noopener\">Animated Plane Game 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\/animated_plane.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Animated Plane Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane_top.png\" title=\"Animated Plane Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Animated Plane Game Primer Tutorial<\/p><\/div>\n<p>The <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> discoveries <font size=1>(along with those naive previous usage without realizing it&#8217;s implications)<\/font> we made creating <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/periodic-table-image-map-primer-tutorial\/' title='Periodic Table Image Map Primer Tutorial' rel=\"noopener\">Periodic Table Image Map Primer Tutorial<\/a> recently has opened up new &#8220;vistas of possibility&#8221; (VOP, of course) for us, and has inspired us to give &#8220;just Javascript and CSS and HTML animated games&#8221; (aided in large part by clipart free content components) another go &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/p>\n<p> &#8230; with a &#8220;widget feel&#8221; now realizable, for us, knowing that white backgrounded HTML iframe content no longer has to hold us back piecing together animations (in an &#8220;OOP feeling&#8221; way) consisting of &#8230;<\/p>\n<ul>\n<li>base webpage CSS and HTML and Javascript (DOM, also helping out the control of) &#8230;<\/li>\n<li>HTML iframe components (and in our case the image content is it&#8217;s background image with background-size:contain; and background-repeat:no-repeat; along with a specific iframe width and height) for any one &#8220;noun&#8221; (or class of object) in your game storyboard &#8230; if you will &#8230; if you will &#8230; if you will &#8230; and &#8230;<\/li>\n<li>HTML img components in a similar vein &#8230; but today&#8217;s trees did not need <i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i> because the originator made the background transparent (ie. another option with all this &#8220;animated pieces thinking&#8221;)<\/li>\n<\/ul>\n<p>Animation(s) can be CSS @keyframe transitions (though not yet with animation above) or Javascript DOM logic via setTimeout (or setInterval) timers or animated GIF\/webp content or, we daresay, many other approaches.<\/p>\n<p>We&#8217;re going to tabularize below &#8220;how we got to the result above&#8221; below &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>We started with a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME\" rel=\"noopener\">&#8220;first draft&#8221;<\/a> &#8230; getting <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpg'><\/img> plane image animated with a rudimentary green border-bottom representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html_GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;second draft&#8221;<\/a> &#8230; adding  <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background to go with edited <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.jpeg'><\/img> because mix-blend-mode:multiply will not mask out the non heterogenous bluish clouds in the image &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-GETME\" rel=\"noopener\">&#8220;third draft&#8221;<\/a> &#8230; tweaking <img title=\"Thanks to https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" alt=\"https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif\" style=\"height:60px;\" src='\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif'><\/img> animated GIF cloud background &#8230; &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html--GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME\" rel=\"noopener\">&#8220;fourth draft&#8221;<\/a> &#8230; establishing an SVG+XML (with SVG text emoji content) border-image for the bottom border representing the ground &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html---GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME\" rel=\"noopener\">&#8220;fifth draft&#8221;<\/a> &#8230; added acknowledgements for all the help &#8230;<\/p>\n<blockquote><p>\nThanks to Image by brgfx on Freepik and https:\/\/i.makeagif.com\/media\/8-11-2023\/Xu_roP.gif and https:\/\/procul.org\/images\/2025\/Animated-Clouds-Gif\/ and  and https:\/\/au.pinterest.com\/pin\/587930926347995281\/ and https:\/\/giphy.com\/explore\/trees-swaying-stickers\n<\/p><\/blockquote>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME\" rel=\"noopener\">&#8220;sixth draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" alt=\"https:\/\/au.pinterest.com\/pin\/587930926347995281\/\" style=\"height:60px;\" src='\/HTMLCSS\/GIF_from_GIFER.gif'><\/img> animated GIF gymnast background and thereby proving that overlapping &#8220;iframe widgets&#8221; (helped out by mix-blend-mode:multiply presumably) was possible, and important &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html-----GETME' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">then to<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html------GETME\" rel=\"noopener\">&#8220;seventh draft&#8221;<\/a> &#8230; added <img title=\"Thanks to https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" alt=\"https:\/\/giphy.com\/explore\/trees-swaying-stickers giphy.com\/explore\/trees-swaying-stickers\" src='\/HTMLCSS\/swaying_trees.webp' style=\"height:60px;\"><\/img> animated (and transparently backgrounded) webp swaying trees image along with tweaked <img title=\"Thanks to Image by brgfx on Freepik\" alt=\"Freepik image\" style=\"height:60px;\" src='\/HTMLCSS\/r8zh_rcsk_141001.gif'><\/img> now animated GIF to animate the plane itself a little, in place, separate to the Javascript DOM based animation moving across the screen &#8230; for today&#8217;s final draft &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.htm' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>In tomorrow&#8217;s installment we allow for user defined content, and sharing, as per &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_plane.html?random=7658796' style=\"mix-blend-mode:multiply;width:100%;height:400px;\"><\/iframe><\/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='#d69240' onclick='var dv=document.getElementById(\"d69240\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mix-blend-mode\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69240' 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='#d69297' onclick='var dv=document.getElementById(\"d69297\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69297' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Animated Plane Game Primer Tutorial set up five &#8220;nouns&#8221; of interest &#8230; trees plane gymnast clouds ground &#8230; each of which has a relationship to a piece of media content. The border-image (ie. ground) content aspects we allow a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-plane-game-user-content-sharing-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,14,15,1,37],"tags":[83,84,127,2472,2379,161,2299,5247,2008,257,281,1654,354,385,5258,5253,476,5257,513,5259,557,3961,2258,576,587,5251,590,4724,652,5254,5243,2011,849,875,894,5256,1918,1988,5255,997,1761,1200,5252,1226,3889,1254,2996,5250,1319,1345,5246,5248,5249,1428,2257],"class_list":["post-69297","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-games","category-uncategorised","category-tutorials","tag-animated-gif","tag-animation-2","tag-background-image","tag-background-repeat","tag-background-size","tag-border","tag-border-image","tag-border-bottom","tag-clipart","tag-content","tag-css","tag-data-uri","tag-dom","tag-emoji","tag-emoji-text","tag-freepik","tag-game","tag-giphy","tag-google","tag-google-image-search","tag-hashtag","tag-hashtagging","tag-height","tag-html","tag-iframe","tag-iframe-widget","tag-image","tag-image-search","tag-javascript","tag-makeagif-com","tag-mix-blend-mode","tag-noun","tag-object","tag-oop","tag-overlay","tag-pinterest","tag-pixel","tag-position","tag-procul-org","tag-programming","tag-prompt","tag-stop-press","tag-storyborad","tag-svg","tag-svgxml","tag-text","tag-transparent","tag-transparent-background","tag-tutorial","tag-url","tag-webp","tag-white","tag-white-background","tag-widget","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69297"}],"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=69297"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69297\/revisions"}],"predecessor-version":[{"id":69324,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69297\/revisions\/69324"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}