{"id":55929,"date":"2022-05-25T03:01:43","date_gmt":"2022-05-24T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55929"},"modified":"2024-02-08T09:42:13","modified_gmt":"2024-02-07T23:42:13","slug":"keyboard-based-cursor-image-source-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-image-source-tutorial\/","title":{"rendered":"Keyboard Based Cursor Image Source Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html?numbi=+9\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Image Source Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_rjm.jpg\" title=\"Keyboard Based Cursor Image Source Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Image Source Tutorial<\/p><\/div>\n<p>Another layer of functionality thinking on top of the work of yesterday&#8217;s <a title='Keyboard Based Cursor Multiple Background Images Tutorial' href='#kbcmbit'>Keyboard Based Cursor Multiple Background Images Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>multiple background image functionality &#8230; could be today&#8217;s &#8230;<\/li>\n<li>image source choice to add to the generous <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> image resource &#8230; thanks &#8230; that of a resource of the tutorial images amongst those of this RJM Programming WordPress Blog you are reading<\/li>\n<\/ul>\n<p> &#8230; channelling the ever nuanced start we made in this regard when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-pair-fitting-into-a-given-dimension-sources-tutorial\/' title='Image Pair Fitting into a Given Dimension Sources Tutorial'>Image Pair Fitting into a Given Dimension Sources Tutorial<\/a>, with its interfacing to an increasing role for the WordPress codex TwentyTen theme 404.php role dealing with the HTTP error 404 well known as &#8220;Webpage Not Found&#8221;.<\/p>\n<p>To make this happen, in code, we had to start breaking up (parameterizing, if you prefer) the hardcoding &#8230;<\/p>\n<blockquote><p>\n\/\/picsum.photos\n<\/p><\/blockquote>\n<p> &#8230; into (var<font size=1>iable<\/font>) &#8230;<\/p>\n<p><code><br \/>\nthesource<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8230;<\/p>\n<blockquote><p>\n?random=\n<\/p><\/blockquote>\n<p> &#8230; into (var<font size=1>iable<\/font> usage) &#8230;<\/p>\n<p><code><br \/>\nthemp + '?random='<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>reflected into<\/font> code snippet example below &#8230;<\/p>\n<p><code><br \/>\n  var thesource=location.search.split('numbi=')[1] ? (decodeURIComponent(location.search.split('numbi=')[1].split('&')[0]).replace('+',' ').replace(' ',' ').replace('-',' ').substring(0,1) == ' ' ? '\/\/www.rjmprogramming.com.au\/ITblog' : '\/\/picsu' + 'm.photos') : '\/\/picsu' + 'm.photos';<br \/>\n  var themp='';<br \/>\n  if (thesource != '\/\/picsu' + 'm.photos') {<br \/>\n    themp='\/';<br \/>\n  }<br \/>\n<br \/>\n  if (numbi != '') {<br \/>\n    if (eval('' + numbi) == 2) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top right;  background-size: 50% 100%, 50% 100%;  background-repeat: no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 3) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right;  background-size: 33% 100%, 34% 100%, 33% 100%;  background-repeat: no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 4) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top right, bottom left, bottom right;  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 5) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 50147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right, bottom left, bottom right;  background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 6) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 10143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 50147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right, bottom left, bottom center, bottom right;  background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 7) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 27143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 10143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 50147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right;  background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 8) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 27143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 87123646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 10143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 50147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right;  background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 9) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; #mydiv, body {  background: url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76547646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 27143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 67143446) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 87123646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 10143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70143646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 50147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 70147646) + '), url(<font color=blue>' + thesource + '<\/font>\/1000\/1000<font color=blue>' + themp + '<\/font>?random=0' + Math.floor(Math.random() * 76147646) + ');  background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right;  background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    }<font color=blue>  else if (thesource != '\/\/picsu' + 'm.photos') {<\/font><br \/>\n     document.head.innerHTML+='&lt;style&gt; ' + document.head.innerHTML.split('&lt;style&gt;')[1].split('&lt;\/style&gt;')[0]<font color=blue>.replace(\/\\\/\\\/picsum\\.photos\/g, thesource).replace(\/\\?random\\=\/g, themp + '?random=').replace(\/00\\)\/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')')<\/font> + ' &lt;\/style&gt;';<br \/>\n    <font color=blue>}<\/font><br \/>\n  }<font color=blue> else if (thesource != '\/\/picsu' + 'm.photos') {<\/font><br \/>\n    document.head.innerHTML+='&lt;style&gt; ' + document.head.innerHTML.split('&lt;style&gt;')[1].split('&lt;\/style&gt;')[0]<font color=blue>.replace(\/\\\/\\\/picsum\\.photos\/g, thesource).replace(\/\\?random\\=\/g, themp + '?random=').replace(\/00\\)\/g, '00' + themp + '?random=' + Math.floor(Math.random() * 198765434) + ')')<\/font> + ' &lt;\/style&gt;';<br \/>\n  <font color=blue>}<\/font><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\/body_mouse_deepdive.html------GETME\" title=\"body_mouse_deepdive.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html------GETME\" title=\"body_mouse_deepdive.html\">body_mouse_deepdive.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\">&#8220;parent&#8221; single background image web application<\/a> (or, for example, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html?numbi=+8\">&#8220;parent&#8221; eight background RJM Programming Blog Tutorial Picture image web application<\/a>) where a user can latch onto the new image source via a <font color=purple>first key press is a + plus character<\/font> &#8230;<\/p>\n<blockquote><p>\nClick and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content &#8230; RJM Programming &#8230; May, 2022 &#8230; thanks to https:\/\/picsum.photos\/ Lorem Picsum  You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  Double click existant foreground emoji element to clear all the foreground emoji elements.  With complex emoji entries do not zero leftpad until your last simple entity eg. \\\\1F6A3\\200D\\2640\\00FE0F could define a Woman Rowing complex emoji.  Optionally make emojis bigger after \\ with + two time multipliers.   Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can work.  If first key is <font color=purple>(+ is RJM image else)<\/font> from 1 to 9 that will be number of background images displayed.\n<\/p><\/blockquote>\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\/new-keyboard-based-cursor-image-source-tutorial\/'>Keyboard Based Cursor Image Source Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcmbit'>Previous relevant <a target=_blank title='Keyboard Based Cursor Multiple Background Images Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-multiple-background-images-tutorial\/'>Keyboard Based Cursor Multiple Background Images 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\/body_mouse_deepdive.html?numbi=9\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Multiple Background Images Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_firstnumber.jpg\" title=\"Keyboard Based Cursor Multiple Background Images Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Multiple Background Images Tutorial<\/p><\/div>\n<p>For the images, those background ones, used in the recent <a title='Canvas Graphics Editing in Zoomed Webpage Tutorial' href='#cgezwt'>Canvas Graphics Editing in Zoomed Webpage Tutorial<\/a>, we use the great <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> resource.  So far that has been the one <font color=purple>background image<\/font> <font color=blue>cover<\/font><font size=1>ing<\/font> the background of the webpage &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\nbody {<br \/>\n  display: inline-block;<br \/>\n  font-size: 128px;<br \/>\n  line-height: 1.2;<br \/>\n  text-align: center;<br \/>\n  <font color=purple>background: url(\/\/picsum.photos\/1000\/1000)<\/font> center center no-repeat;<br \/>\n  <font color=blue>background-size: cover;<\/font><br \/>\n  background-clip: text;<br \/>\n  -webkit-background-clip: text;<br \/>\n<br \/> <br \/>\n  color: rgba(255,0,0,0.6);<br \/>\n<br \/>\n  span { color: transparent; }<br \/>\n}<br \/>\n<br \/>\ndiv {<br \/>\n  background-color: transparent;<br \/>\n  caret-color: transparent;<br \/>\n}<br \/>\n<br \/>\n@media only screen and (max-width: 1000px) {<br \/>\ndiv {<br \/>\n  background: url(\/\/picsum.photos\/1000\/1000) center center no-repeat;<br \/>\n}<br \/>\n}<br \/>\n<br \/>\ndiv:focus {<br \/>\n    outline: none !important;<br \/>\n}<br \/>\n<br \/>\nhtml {<br \/>\n       height: 100%;<br \/>\n       display: flex;<br \/>\n       cursor: Url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\002753&lt;\/text&gt;&lt;\/svg&gt;\") 16 0, crosshair;<br \/>\n}<br \/>\n<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; nominally <font size=1 color=brown>background-<\/font><font color=brown>position<\/font><font size=1>ed<\/font> &#8220;center center&#8221;.  But there are 9 <font size=1 color=brown>background-<\/font><font color=brown>position<\/font> of that similar ilk available &#8230;<\/p>\n<ul>\n<li>top left<\/li>\n<li>top center<\/li>\n<li>top right<\/li>\n<li>center left<\/li>\n<li>center center<\/li>\n<li>center right<\/li>\n<li>bottom left<\/li>\n<li>bottom center<\/li>\n<li>bottom right<\/li>\n<\/ul>\n<p> &#8230; which we&#8217;d like to, optionally, be involved with how a user uses <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-----GETME\" title=\"body_mouse_deepdive.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-----GETME\" title=\"body_mouse_deepdive.html\">body_mouse_deepdive.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\">&#8220;parent&#8221; single background image web application<\/a> (or, for example, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html?numbi=4\">&#8220;parent&#8221; four background image web application<\/a>).<\/p>\n<p>So, how to make it be able to be controlled by those users?  Well, those previous keyboard logics involving emojis always involved a leading &#8220;\\&#8221; backslash, so that leaves open numbers from 1 to 9 entered as a first keyboard character entered meaning that <font color=darkgreen>that is how many background images is wanted by that user<\/font> &#8230;<\/p>\n<blockquote><p>\nClick and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content &#8230; RJM Programming &#8230; May, 2022 &#8230; thanks to https:\/\/picsum.photos\/ Lorem Picsum  You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  Double click existant foreground emoji element to clear all the foreground emoji elements.  With complex emoji entries do not zero leftpad until your last simple entity eg. \\\\1F6A3\\200D\\2640\\00FE0F could define a Woman Rowing complex emoji.  Optionally make emojis bigger after \\ with + two time multipliers.   Share with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.  <font color=darkgreen>If first key is from 1 to 9 that will be number of background images displayed.<\/font>\n<\/p><\/blockquote>\n<p> &#8230; supported by &#8230;<\/p>\n<p><code><br \/>\n  var numbi=location.search.split('numbi=')[1] ? reduce(decodeURIComponent(location.search.split('numbi=')[1].split('&')[0])) : '1';<br \/>\n<br \/>\n  if (numbi != '') {<br \/>\n    if (eval('' + numbi) == 2) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top right;  background-size: 50% 100%, 50% 100%;  background-repeat: no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 3) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right;  background-size: 33% 100%, 34% 100%, 33% 100%;  background-repeat: no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 4) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top right, bottom left, bottom right;  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 5) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=50147646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right, bottom left, bottom right;  background-size: 33% 50%, 34% 50%, 33% 50%, 50% 50%, 50% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 6) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=10143646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=50147646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right, bottom left, bottom center, bottom right;  background-size: 33% 50%, 34% 50%, 33% 50%, 33% 50%, 34% 50%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 7) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=27143646), url(\/\/picsum.photos\/1000\/1000?random=10143646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=50147646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right, center center, bottom left, bottom center, bottom right;  background-size: 33% 50%, 34% 33%, 33% 50%, 34% 34%, 33% 50%, 34% 33%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 8) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=27143646), url(\/\/picsum.photos\/1000\/1000?random=87123646), url(\/\/picsum.photos\/1000\/1000?random=10143646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=50147646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right, center left, center center, bottom left, bottom center, bottom right;  background-size: 33% 33%, 34% 33%, 33% 50%, 33% 34%, 34% 34%, 33% 33%, 34% 33%, 33% 50%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    } else if (eval('' + numbi) == 9) {<br \/>\n     document.head.innerHTML+='&lt;style&gt; body {  background: url(\/\/picsum.photos\/1000\/1000?random=76547646), url(\/\/picsum.photos\/1000\/1000?random=27143646), url(\/\/picsum.photos\/1000\/1000?random=67143446), url(\/\/picsum.photos\/1000\/1000?random=87123646), url(\/\/picsum.photos\/1000\/1000?random=10143646), url(\/\/picsum.photos\/1000\/1000?random=70143646), url(\/\/picsum.photos\/1000\/1000?random=50147646), url(\/\/picsum.photos\/1000\/1000?random=70147646), url(\/\/picsum.photos\/1000\/1000?random=76147646);  background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right;  background-size: 33% 33%, 34% 33%, 33% 33%, 33% 34%, 34% 34%, 33% 34%, 33% 33%, 34% 33%, 33% 33%;  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } &lt;\/style&gt;';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function reduce(invl) {<br \/>\n    if (('' + invl).trim() == '') { return '1'; }<br \/>\n    if (('' + invl).trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/0\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') != '') { return '1'; }<br \/>\n    var retval=0, ij=0;<br \/>\n    var cinvl='' + invl;<br \/>\n    var xcinvl='';<br \/>\n    for (ij=0; ij&lt;cinvl.length; ij++) {<br \/>\n     if (cinvl.substring(ij).substring(0,1) != '-') {<br \/>\n      retval+=eval(cinvl.substring(ij).substring(0,1));<br \/>\n     }<br \/>\n    }<br \/>\n    xcinvl='' + retval;<br \/>\n    while (xcinvl.length &gt; 1) {<br \/>\n      retval=0;<br \/>\n      for (ij=0; ij&lt;xcinvl.length; ij++) {<br \/>\n       if (xcinvl.substring(ij).substring(0,1) != '-') {<br \/>\n        retval+=eval(xcinvl.substring(ij).substring(0,1));<br \/>\n       }<br \/>\n      }<br \/>\n      xcinvl='' + retval;<br \/>\n    }<br \/>\n    if (retval == 0) { retval=1; }<br \/>\n    return '' + retval;<br \/>\n  }<br \/>\n<\/code><\/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\/keyboard-based-cursor-multiple-background-images-tutorial\/'>Keyboard Based Cursor Multiple Background Images Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcccct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Canvas Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-canvas-content-copy-tutorial\/'>Keyboard Based Cursor Canvas Content Copy 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\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Canvas Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_canvas.jpg\" title=\"Keyboard Based Cursor Canvas Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Canvas Content Copy Tutorial<\/p><\/div>\n<p>You may have noticed with yesterday&#8217;s <a title='Keyboard Based Cursor Share Content Copy Tutorial' href='#kbcscct'>Keyboard Based Cursor Share Content Copy Tutorial<\/a>, crucial to the sharing code, was the use of the incredible HTML5 introduced <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element, helped by that middleperson link to those <i>public<\/i> email and SMS sharing conduits, overseeing the great random <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background images and user created emoji and\/or text initial annotations.<\/p>\n<p>And this got us wondering whether there was a <i>private<\/i> (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes.   And yes, do you remember the canvas work involved in the featured web application of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-canvas-annotation-tutorial\/' title='Emoji Borders and Backgrounds Canvas Annotation Tutorial'>Emoji Borders and Backgrounds Canvas Annotation Tutorial<\/a>?<\/p>\n<p>It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">user_of_signature_signature.htm<\/a> web application.  Once <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html----GETME\" title=\"body_mouse_deepdive.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html----GETME\" title=\"body_mouse_deepdive.html\">body_mouse_deepdive.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\">&#8220;parent&#8221; web application<\/a> has organized its canvas contents, it&#8217;s just a matter of &#8230;<\/p>\n<p><code><br \/>\n  var awo=null;<br \/>\n  awo=<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a>('.\/user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');<br \/>\n<\/code><\/p>\n<p> &#8230; for the &#8220;child&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">canvas annotator<\/a> to effectively &#8220;suck up&#8221; the canvas data into its canvas via &#8230;<\/p>\n<p><code><br \/>\nvar cancont='';<br \/>\nvar elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : \"canvas\";<br \/>\n<br \/>\nif (('' + <a target=_blank title='window.opener information from W3Schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'>window.opener<\/a>).replace('null','') != '') {<br \/>\n    var cans=window.opener.document.<a target=_blank title='Javascript DOM getElementsByTagName() method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_getelementsbytagname.asp'>getElementsByTagName<\/a>(elemode);<br \/>\n    if (cans.length &gt; 0) {<br \/>\n      if (elemode == 'img') {<br \/>\n      cancont=cans[0].src;<br \/>\n      } else {<br \/>\n      cancont=cans[0].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>('image\/png');<br \/>\n      }<br \/>\n      if (cancontw < 0 &#038;&#038; canconth < 0) {\n      cancontw=cans[0].width; \n      canconth=cans[0].height; \n      }\n    }\n}\n<\/code><\/p>\n<p> ... possible because both \"parent\" and \"child\" exist on the same RJM Programming domain (web server).<\/p>\n<p>Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that \"child\".<\/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\/keyboard-based-cursor-canvas-content-copy-tutorial\/'>Keyboard Based Cursor Canvas Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcscct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Share Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-share-content-copy-tutorial\/'>Keyboard Based Cursor Share Content Copy 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\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Share Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_share.jpg\" title=\"Keyboard Based Cursor Share Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Share Content Copy Tutorial<\/p><\/div>\n<p>Yesterday's <a title='Keyboard Based Cursor Personalized Content Copy Tutorial' href='#kbcpcct'>Keyboard Based Cursor Personalized Content Copy Tutorial<\/a> has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background image.<\/p>\n<p>We've been helped out greatly by <a target=_blank title='javascript - Can I take a screenshot from the clipboard? - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/55559432\/can-i-take-a-screenshot-from-the-clipboard'>javascript - Can I take a screenshot from the clipboard? - Stack Overflow<\/a> and <a target=_blank title='html - How to render a blob on a canvas element? - Stack Overflow' href='https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element'>html - How to render a blob on a canvas element? - Stack Overflow<\/a> in the following new relevant Javascript code ...<\/p>\n<p><code><br \/>\nfunction renderNoImage(canvas, blob) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element<br \/>\n  const ctx = canvas.getContext('2d');<br \/>\n  const img = new Image();<br \/>\n  img.onload = (event) =&gt; {<br \/>\n    URL.revokeObjectURL(event.target.src) \/\/  This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.<br \/>\n    ctx.drawImage(event.target, 0, 0)<br \/>\n  img.style.display='none';<br \/>\n  img.style.zIndex='-123';<br \/>\n  };<br \/>\n  img.src = URL.createObjectURL(blob);<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction renderImage(canvas, blob) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element<br \/>\n  const ctx = canvas.getContext('2d');<br \/>\n  const img = new Image();<br \/>\n  img.onload = (event) =&gt; {<br \/>\n    URL.revokeObjectURL(event.target.src) \/\/  This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.<br \/>\n    ctx.drawImage(event.target, 0, 0)<br \/>\n  };<br \/>\n  img.src = URL.createObjectURL(blob);<br \/>\n}<br \/>\n<br \/> <br \/>\n  addEventListener(\"paste\", ev =&gt; { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/55559432\/can-i-take-a-screenshot-from-the-clipboard<br \/>\n    for(const item of ev.clipboardData.items) { \/\/\/ Clipboard may contain multiple elements of different type -- text, image, etc<br \/>\n        if(item.type.startsWith(\"image\/\")) { \/\/\/ We are only interested in clipboard data that is an image<br \/>\n            if (emailee == '') {<br \/>\n            emailee=prompt('Your clipboard has a useful image you could share the image with.  Optionally, please enter an email address or SMS number to share with.');<br \/>\n            if (emailee == null) { emailee=''; }<br \/>\n            }<br \/>\n            if (emailee.indexOf('@') != -1) {<br \/>\n            document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');<br \/>\n            document.getElementById('aemail').click();<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            } else if (emailee != '' && emailee.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n            document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');<br \/>\n            document.getElementById('asms').click();<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            } else {<br \/>\n            \/\/document.getElementById('mydiv').style.overflow='scroll';<br \/>\n            document.getElementById('mycanvas').innerHTML='&lt;br&gt;&lt;canvas style=\"display:none;position:absolute;z-index:-98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '&gt;&lt;\/canvas&gt;';<br \/>\n            elem=document.getElementById('thecanvas');<br \/>\n            context=elem.getContext('2d');<br \/>\n            renderNoImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);<br \/>\n            document.getElementById('mycanvas').innerHTML='';<br \/>\n            }<br \/>\n        }<br \/>\n    }<br \/>\n});<br \/>\n<\/code> <\/p>\n<p> ... which is explained to the user in the following way ...<\/p>\n<blockquote><p>\nShare with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.\n<\/p><\/blockquote>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html---GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/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\/keyboard-based-cursor-share-content-copy-tutorial\/'>Keyboard Based Cursor Share Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbcpcct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Personalized Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-personalized-content-copy-tutorial\/'>Keyboard Based Cursor Personalized Content Copy 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\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Personalized Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdiveemoji.jpg\" title=\"Keyboard Based Cursor Personalized Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Personalized Content Copy Tutorial<\/p><\/div>\n<p>On top of yesterday's <a title='Keyboard Based Cursor Content Copy Tutorial' href='#kbccct'>Keyboard Based Cursor Content Copy Tutorial<\/a> we wanted to offer the user the chance for them to tailor their foreground content on top of the <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> background image.<\/p>\n<p>The user can enter this via the keyboard because there is an HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true pallette to work with ...<\/p>\n<p><code><br \/>\n&lt;div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick=\"this.innerHTML='';\" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum  <font color=blue>You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  <\/font><font color=purple>Double click existant foreground emoji element to clear all the foreground emoji elements.<\/font>' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' <font color=olive>onkeypress=kpcursorlook(event); <\/font>onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>It's \"title\" attribute now talks about two new pieces of functionality, those being ...<\/p>\n<ul>\n<li><font color=blue>You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji).  <\/font><\/li>\n<li><font color=purple>Double click existant foreground emoji element to clear all the foreground emoji elements.<\/font><\/li>\n<\/ul>\n<p>The choice of keyboard input methodology also suits CSS \"content\" property definitions as one backslash followed by a hexidecimal value left padded with zeroes to a length of six.  See us doing this below for an <span id=myumbrella>umbrella emoji <\/span> (which could also be expressed in an HTML hexadecimal entity way &amp;#x2602; &#x2602; the information for which you can find at <a target=_blank href='https:\/\/www.fileformat.info\/info\/unicode\/char\/2602\/index.htm'>Unicode Character 'UMBRELLA' (U+2602)<\/a> we normally get to by entering \"U+2602\" at a web browser address bar, the knowledge for which we arrive at via entering \"umbrella emojipedia\" and moving down the top link's webpage to find the \"U+2602\")  ...<\/p>\n<p><code><br \/>\n&lt;style&gt; #myumbrella::after { content: '\\002602'; } &lt;\/style&gt;<br \/>\n<\/code><\/p>\n<style> #myumbrella::after { content: '\\002602'; } <\/style>\n<p> ... that feeds into some new <a target=_blank title='Event onkeydown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeypress.asp'>\"onkeypress\"<\/a> keyboard event logic ...<\/p>\n<p><code><br \/>\n  function kpcursorlook(evt) {<br \/>\n    var atofa=['a','b','c','d','e','f'];<br \/>\n    var rgbit='';<br \/>\n    if (evt.keyCode == 92) {<br \/>\n     if (newu.length == 1) { gro=true; } else { gro=false; }<br \/>\n     newu=(\"\\\\\").substring(0,1);<br \/>\n    } else if (evt.keyCode &gt;= 48 && evt.keyCode &lt;= 57) {<br \/>\n     newu+=('' + eval(-48 + evt.keyCode));<br \/>\n    } else if (evt.keyCode &gt;= 65 && evt.keyCode &lt;= 70) {<br \/>\n     newu+=('' + atofa[eval(-65 + evt.keyCode)]);<br \/>\n    } else if (evt.keyCode &gt;= 97 && evt.keyCode &lt;= 102) {<br \/>\n     newu+=('' + atofa[eval(-97 + evt.keyCode)]);<br \/>\n    }<br \/>\n    if (newu.length == 7) {<br \/>\n     if (lastcursor.indexOf((\"\\\\\\\\\").substring(0,2)) != -1) {<br \/>\n       rgbit=lastcursor.split((\"\\\\\\\\\").substring(0,2))[1].substring(6);<br \/>\n       lastcursor=lastcursor.split((\"\\\\\\\\\").substring(0,2))[0] + (\"\\\\\").substring(0,1) + newu + rgbit;<br \/>\n       document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n     } else if (lastcursor.indexOf((\"\\\\\").substring(0,1)) != -1) {<br \/>\n       rgbit=lastcursor.split((\"\\\\\").substring(0,1))[1].substring(6);<br \/>\n       lastcursor=lastcursor.split((\"\\\\\").substring(0,1))[0] + newu + rgbit;<br \/>\n       if (gro) {<br \/>\n         lastcursor=lastcursor.replace('&gt;Shift\/Alt\/Ctrl', '&gt;').replace('&gt;Shift', '&gt;').replace('&gt;Alt', '&gt;').replace('&gt;Ctrl', '&gt;').replace(\" width='126'\", \" width='20'\").replace(\" width='66'\", \" width='20'\").replace(\" height='48'\", \" height='20'\").replace('0 0 100 100', '0 0 20 20');<br \/>\n       }<br \/>\n       document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n     }<br \/>\n    }<br \/>\n   \/\/ console.log(evt.keyCode);<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html-GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Two more \"title\" attribute pieces of functionality are now ...<\/p>\n<ul>\n<li><font color=darkgreen>With complex emoji entries do not zero leftpad until your last simple entity eg. \\\\1F6A3\\200D\\2640\\00FE0F could define a Woman Rowing complex emoji.<\/font><\/li>\n<li><font color=brown>Optionally make emojis bigger after \\ with + two time multipliers.<\/font><\/li>\n<\/ul>\n<p>The choice of keyboard input methodology also suits CSS \"content\" property definitions as one backslash followed by \"first off\" sets of HTML entities they should not left zero pad in their entry, followed by a last HTML entity hexidecimal value left padded with zeroes to a length of six to finish up with.  See us doing this below for a <span id=myrowing>woman rowing emoji <\/span> (which could also be expressed in an HTML hexadecimal entity way &amp;#x1f6a3;&amp;#x0200d;&amp;#x02640;&amp;#x0fe0f; the information for which you can find at <a target=_blank href='https:\/\/emojiterra.com\/woman-rowing-boat\/'>&#x1f6a3;&#x0200d;&#x02640;&#x0fe0f; Woman Rowing Boat Emoji<\/a> we normally get to by entering \"woman rowing emoji\" at the web browser address bar)  ...<\/p>\n<p><code><br \/>\n&lt;style&gt; #myrowing::after { content: '\\01f6a3\\00200d\\002640\\00fe0f'; } &lt;\/style&gt;<br \/>\n<\/code><\/p>\n<style> #myrowing::after { content: '\\01f6a3\\00200d\\002640\\00fe0f'; } <\/style>\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html--GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><img decoding=\"async\" style=\"width:100%;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive_complexemoji.jpg\"><\/img><\/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\/keyboard-based-cursor-personalized-content-copy-tutorial\/'>Keyboard Based Cursor Personalized Content Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kbccct'>Previous relevant <a target=_blank title='Keyboard Based Cursor Content Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-content-copy-tutorial\/'>Keyboard Based Cursor Content Copy 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\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.jpg\" title=\"Keyboard Based Cursor Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Content Copy Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onkeydown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeydown.asp'>\"onkeydown\"<\/a> keyboard event can involve in its logic three <a target=_blank title='Mouse event information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_mouseevent.asp'>mouse event<\/a> (event object) property usages that caught our interest recently ...<\/p>\n<ul>\n<li><a target=_blank title='event.altKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_altkey.asp'>event.altKey<\/a><\/li>\n<li><a target=_blank title='event.shiftKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_shiftkey.asp'>event.shiftKey<\/a><\/li>\n<li><a target=_blank title='event.ctrlKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_ctrlkey.asp'>event.ctrlKey<\/a><\/li>\n<\/ul>\n<p> ... and we wanted to have \"keyboard\" meets \"mouse\" events, along with the brilliance of <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> regarding background image randomosity and quality, working with HTML ...<\/p>\n<p><code><br \/>\n&lt;div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> ... in a way we hadn't tried before that called on some inhouse cursor SVG creations <font size=1>(and so is, alas, just a non-mobile fully featured experience)<\/font>, in the sense that ...<\/p>\n<ol>\n<li>keyboard helps creating the \"what\" regarding content ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastkeymodifier=''<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function cursorlook(evt) {<br \/>\n    if (evt.altKey) {<br \/>\n      if (lastkeymodifier != 'alt') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Alt\\\\01f3d5&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='alt';<br \/>\n      }<br \/>\n    } else if (evt.ctrlKey) {<br \/>\n      if (lastkeymodifier != 'ctrl') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Ctrl\\\\01f333&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, pointer\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='ctrl';<br \/>\n      }<br \/>\n    } else if (evt.shiftKey) {<br \/>\n      if (lastkeymodifier != 'shift') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Shift\\\\01f389&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, grab\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='shift';<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (lastkeymodifier != '') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>mouse <a target=_blank title='Event onmousedown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onmousedown.asp'>\"onmousemove\"<\/a> or <a target=_blank title='Event ontouchdown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_touchmove.asp'>\"ontouchmove\"<\/a> helps with the \"where\" regarding content above ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function xycursorlook(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>preparations for \"onclick\" way a cursor can be plonked into (real lasting) content ...<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n  <br \/>\n  function stamp(divo) {<br \/>\n    if (('' + pos3).indexOf('-') == -1) {<br \/>\n    if (allowable) {<br \/>\n    \/\/if (allowed) {<br \/>\n    \/\/allowed=false;<br \/>\n    \/\/setTimeout(reseta, 2000);<br \/>\n    divo.innerHTML+='&lt;div id=div' + subdiv + ' style=\"position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;\"&gt;&lt;\/div&gt;&lt;style&gt; #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } &lt;\/style&gt;';<br \/>\n    subdiv++;<br \/>\n    \/\/console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);<br \/>\n    \/\/console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);<br \/>\n    lastpos3=pos3;<br \/>\n    lastpos4=pos4;<br \/>\n    \/\/}<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/ol>\n<p> ... with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html_GETME\">\"proof of concept\" body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/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='#d55848' onclick='var dv=document.getElementById(\"d55848\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeydown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55848' 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='#d55876' onclick='var dv=document.getElementById(\"d55876\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeypress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55876' 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='#d55891' onclick='var dv=document.getElementById(\"d55891\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55891' 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='#d55897' onclick='var dv=document.getElementById(\"d55897\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55897' 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='#d55920' onclick='var dv=document.getElementById(\"d55920\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55920' 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='#d55929' onclick='var dv=document.getElementById(\"d55929\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hardcoding\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55929' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Another layer of functionality thinking on top of the work of yesterday&#8217;s Keyboard Based Cursor Multiple Background Images Tutorial &#8230; multiple background image functionality &#8230; could be today&#8217;s &#8230; image source choice to add to the generous Lorem Picsum image &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-image-source-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,37],"tags":[2098,2432,126,3985,2472,151,155,184,1887,2442,260,2127,342,380,2713,3727,3983,3362,576,2658,578,652,672,673,3982,739,812,2092,861,1705,2337,2219,2723,894,907,997,2232,1055,1776,1133,2587,1159,3262,1200,1226,2324,1319,1324,1325,1433,3986,1456],"class_list":["post-55929","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-accountability","tag-alt","tag-background","tag-background-position-background-size","tag-background-repeat","tag-blog","tag-body","tag-canvas","tag-codex","tag-contenteditable","tag-control","tag-cursor","tag-div","tag-email","tag-emojiterra","tag-fileformat","tag-getelementsbytagname","tag-hardcoding","tag-html","tag-html-entity","tag-html5","tag-javascript","tag-key","tag-keyboard","tag-lorem-picsum","tag-mailto","tag-mouse","tag-multiple","tag-onclick","tag-onkeydown","tag-onkeypress","tag-onmousemove","tag-ontouchmove","tag-overlay","tag-paste","tag-programming","tag-property","tag-repository","tag-screenshot","tag-share","tag-shift","tag-sms","tag-source","tag-stop-press","tag-svg","tag-todataurl","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-window-open","tag-window-opener-hardcode","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55929"}],"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=55929"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55929\/revisions"}],"predecessor-version":[{"id":62546,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55929\/revisions\/62546"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}