<html>
<head>
<script type=text/javascript>
var cds=['Cell 0', 'Cell 1', 'Line of Doves', 'Cell 3', 'Border of Trains', 'Cell 5', 'Background of Andorra Flags'];
var ops=[1.0, 1.0, 0.2];

function fancystuff() {
var rects=[];
var trs=document.getElementsByTagName('tr');
var ths=document.getElementsByTagName('th');
document.body.style.backgroundColor='#fffaff';
for (var jjjfs=0; jjjfs<ths.length; jjjfs++) {
rects.push(ths[jjjfs].getBoundingClientRect());
ths[jjjfs].style.position='absolute';
ths[jjjfs].style.top='' + rects[eval(-1 + rects.length)].top + 'px';
ths[jjjfs].style.left='' + rects[eval(-1 + rects.length)].left + 'px';
ths[jjjfs].style.width='' + rects[eval(-1 + rects.length)].width + 'px';
ths[jjjfs].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
trs[0].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
if (jjjfs == 1) { ths[jjjfs].innerHTML+=' (and foreground context)'; }
}
rects=[];
var tds=document.getElementsByTagName('td');
for (var jjfs=0; jjfs<tds.length; jjfs++) {
rects.push(tds[jjfs].getBoundingClientRect());
if (eval(jjfs % 2) == 0) {
tds[jjfs].style.position='absolute';
tds[jjfs].style.top='' + rects[eval(-1 + rects.length)].top + 'px';
tds[jjfs].style.left='' + rects[eval(-1 + rects.length)].left + 'px';
tds[jjfs].style.width='' + rects[eval(-1 + rects.length)].width + 'px';
tds[jjfs].style.height='' + rects[eval(-1 + rects.length)].height + 'px';
}
}
//alert(document.body.innerHTML);
//var woo=window.open('','_blank','top=100,left=100,width=600,height=600');
//woo.document.write('<html><body>' + document.body.innerHTML + '</body></html>');
var kfs=1, minus30='';
if (1 == 1) {
var ifs=document.getElementsByTagName('iframe');
for (var jfs=0; jfs<ifs.length; jfs++) {
rects.push(ifs[jfs].getBoundingClientRect());
ifs[jfs].style.opacity='' + ops[jfs];
ifs[jfs].style.position='absolute';
ifs[jfs].style.top='' + rects[kfs].top + 'px';
ifs[jfs].style.left='' + rects[1].left + 'px';
ifs[jfs].style.width='' + rects[kfs].width + 'px';
ifs[jfs].style.height='' + rects[kfs].height + 'px';
ifs[jfs].style.border='1px dashed red';
minus30='-' + eval(eval(eval('' + cds[eval(1 + kfs)].length) * 3.75));
//alert(minus30);
//alert('<p style="position:absolute;top:' + eval(-30 + eval('' + rects[kfs].top) + eval(eval('' + rects[kfs].height) / 2)) + 'px;left:' + eval(eval('' + minus30) + eval('' + rects[1].left) + eval(eval('' + rects[kfs].width) / 2)) + 'px;">' + cds[eval(1 + kfs)] + '</p>');
document.getElementById('tdiv').innerHTML+='<p style="position:absolute;top:' + eval(-30 + eval('' + rects[kfs].top) + eval(eval('' + rects[kfs].height) / 2)) + 'px;left:' + eval(eval('' + minus30) + eval('' + rects[1].left) + eval(eval('' + rects[kfs].width) / 2)) + 'px;">' + cds[eval(1 + kfs)] + '</p>';
kfs+=2;
}
}
}

function ask(sois) {
var huhi=prompt('Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] ) ?','');
if (huhi == null) { huhi=''; }
if (huhi.trim() != '') {
if (document.URL.indexOf('rjmprogramming.com.au') == -1 && sois.title.indexOf('rjmprogramming.com.au') != -1) {
sois.title=document.URL.substring(0,8) + document.URL.substring(8).split('/')[0] + sois.title.split('rjmprogramming.com.au')[1];
}
sois.title+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');
document.getElementById(sois.id.replace('span','if')).src=sois.title; //+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');
}
}
</script>
</head>
<body onload='fancystuff();'>
<h1>Making Use of Emoji Borders and Backgrounds</h1>
<h3>RJM Programming - January, 2022</h3>
<h4>Thanks to <a target=_blank title='https://stackoverflow.com/questions/1623242/problem-with-dynamic-svg-image-generation' href='//stackoverflow.com/questions/1623242/problem-with-dynamic-svg-image-generation'>Problem with dynamic SVG image generation</a></h4>
<table id=emtable>
<tr><th title='Clicks below allow for image inclusion'>Description</th><th>Iframe</th></tr>
<tr><td style='vertical-align:top;'><span id=spanone onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=128330&width=260">Line of Doves of Peace Emojis</span></td><td><iframe id=ifone src="//www.rjmprogramming.com.au/inline_svg.php?insvg=128330&width=260"></iframe></td></tr>
<tr><td style='vertical-align:top;'><span id=spantwo onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=128646&width=260&height=120">Border of Train Emojis</span></td><td><iframe id=iftwo src="//www.rjmprogramming.com.au/inline_svg.php?insvg=128646&width=260&height=120"></iframe></td></tr>
<tr><td style='vertical-align:top;'><span id=spanthree onclick='ask(this);' title="//www.rjmprogramming.com.au/inline_svg.php?insvg=127462,127465&width=260&height=120&background=">Background Flag of Andorra Emojis</span></td><td><iframe id=ifthree src="//www.rjmprogramming.com.au/inline_svg.php?insvg=127462,127465&width=260&height=120&background="></iframe></td></tr>
</table>
<div id=tdiv></div>
</body>
</html>