<html>
<head>
<title>Dappled Light - RJM Programming - April, 2025 ... thanks to https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image</title>
<style>
.background-image {
background: url('//www.rjmprogramming.com.au/dappled_light.jpg');
background-repeat: no-repeat;
background-size: contain;
}
</style>
<script type=text/javascript>

var disturb=true, lastchoice='', firstchoice='';
var absare=[], iabs=0, kabs=0, jabs=0, acount=0, arwo=null, origpl='', iorigpos=0, two=2;
var firsturl='//www.rjmprogramming.com.au/dappled_light.jpg', lastmultpos='', firstmultpos='top left', lasturl='', numb=2, actnumb=1;
var prebrest=' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px ';
var brest=' ' + firstmultpos + ' no-repeat';
var blist='', bposlist='', bcomblist='';

function dosize(dc) {
var suffdc='';
numb=2;
while (actnumb > eval(numb * numb)) {
numb++;
}
for (var ij=0; ij<actnumb; ij++) {
if (suffdc == '') {
suffdc=' !important; } .background-image { background-size: ' + ' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px';
} else {
suffdc+=',' + ' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px';
}
}
return dc.replace(/url\(/g, 'linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url(') + suffdc;
}

function restatebackground() {
if (lasturl != '' && lastmultpos != '') {
//alert('lasturl=' + lasturl);
actnumb++;
blist+=',url("' + lasturl + '")';
bposlist+=',' + lastmultpos + '';
bcomblist+=',url("' + lasturl + '") ' + lastmultpos + ' no-repeat';
document.getElementsByTagName('div')[0].style.background=bcomblist;
lasturl='';
lastmultpos='';
return '<style> .background-image { background: ' + dosize(bcomblist) + ' !important; } </style>';
}
return '';
}

function wellthatisinteresting(inval) {
switch (inval) {
case 'top left':
case 'top center':
case 'top right':
case 'center left':
case 'center center':
case 'center right':
case 'bottom left':
case 'bottom center':
case 'bottom right':
firstmultpos=inval.toLowerCase();
firstchoice=inval;
lastchoice=inval;
blist='url("' + firsturl + '")';
prebrest=' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px ';
bcomblist='url("' + firsturl + '") ' + firstmultpos + ' no-repeat';
brest=' ' + firstmultpos + ' no-repeat';
//alert(brest);
bposlist=firstmultpos;
setTimeout(capitalize, 2000);
break;

case 'top left'.toUpperCase():
case 'top center'.toUpperCase():
case 'top right'.toUpperCase():
case 'center left'.toUpperCase():
case 'center center'.toUpperCase():
case 'center right'.toUpperCase():
case 'bottom left'.toUpperCase():
case 'bottom center'.toUpperCase():
case 'bottom right'.toUpperCase():
lastmultpos=inval.toLowerCase();
//alert(lastmultpos);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
break;

default:
break;
}

return inval;
}

function capitalize() {
var jsts=['top left','top center','top right','center left','center center','center right','bottom left','bottom center','bottom right'];
var suffbit='';

if (lastchoice != '') {
var thatih=document.getElementById('mysel').innerHTML;
if (thatih.indexOf('"' + lastchoice + '"') != -1) {
for (var ij=0; ij<jsts.length; ij++) {
if (thatih.indexOf('"' + jsts[ij] + '"') != -1) {
suffbit=thatih.split(jsts[ij] + '"')[1].split('</option>')[0];
thatih=thatih.replace(jsts[ij] + '"' + suffbit, jsts[ij].toUpperCase() + '"' + suffbit.split(';')[0] + '; /* next usage will await a new background image below */');
}
}
}
document.getElementById('mysel').innerHTML=thatih;
}

}

function assess(isbut,sin) {
var dsbit='', potbut=false, pbut=false;
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (wellthatisinteresting(sin.options[i].value) != '') {
if (sin.options[i].value != '' && sin.options[i].value == sin.options[i].value.toUpperCase()) { return ''; }
//alert('hopefully not');
potbut=false;
pbut=false;
if (dsbit == '') { dsbit='<style> .background-image { } </style>'; }
if (isbut && sin.options[i].innerText.indexOf('filter:') != -1 && dsbit.indexOf('filter:') != -1) {
dsbit=dsbit.replace('filter:', 'filter: ' + sin.options[i].innerText.split('filter:')[1].split(';')[0] + ' ');
} else if (isbut && sin.options[i].innerText.indexOf('transform:') != -1 && dsbit.indexOf('transform:') != -1) {
dsbit=dsbit.replace('transform:', 'transform: ' + sin.options[i].innerText.split('transform:')[1].split(';')[0] + ' ');
} else {
dsbit=dsbit.replace('}', ' ' + sin.options[i].innerText.replace(';', ' !important;') + ' ' + ' }');
}
} else if (isbut) {
potbut=true;
} else {
pbut=true;
}
}
}
if (pbut) {
document.getElementById('mybut').innerHTML='Start Again ...';
}
if (dsbit != '') {
if (4 == 4) {
fixtitle(dsbit);
} else {
if (document.getElementById('mc').title == '') { document.getElementById('mc').title='<style></style>'; }
document.getElementById('mc').title=document.getElementById('mc').title.replace('</style>', dsbit.replace('<style>','').replace('</style>','').replace(/\;/g, '; ' + String.fromCharCode(10)) + ' </style>');
}
document.getElementById('dstyles').innerHTML+=dsbit;
} else if (potbut) {
location.href=document.URL;
}
}

function fixtitle(dsbit) {
if (document.getElementById('mc').title == '') { document.getElementById('mc').title='<style></style>'; }
//alert(dsbit);
document.getElementById('mc').title=document.getElementById('mc').title.replace('</style>', dsbit.replace(/\<style\>/g,'').replace(/\<\/style\>/g,'').replace(/\;/g, '; ' + String.fromCharCode(10)) + ' </style>');
}

function toggleit() {
if (document.getElementById('mc').outerHTML.split('>')[0].indexOf('none;') != -1) {
two=2;
document.getElementById('mc').style.display='block';
setTimeout(toggleit, 15000);
} else if (!disturb) {
two=2;
setTimeout(toggleit, 5000);
} else {
two=0;
document.getElementById('mybut').innerHTML='Display';
document.getElementById('optone').innerHTML='Dappled Light - start again ... can pick combinations of CSS effects below';
document.getElementById('mc').style.display='none';
setTimeout(toggleit, 5000);
if (eval('' + document.getElementById('mynum').placeholder.length) < eval('' + document.getElementById('mynum').title.length)) {
document.getElementById('mynum').placeholder+=' ... ' + document.getElementById('mynum').title + ' ';
origpl=document.getElementById('mynum').placeholder
setInterval(eatatjoes, 100);
}
}
}

function eatatjoes() {
var atst='';
iorigpos+=two;
if (iorigpos >= eval('' + document.getElementById('mynum').placeholder.length)) {
iorigpos=0;
document.getElementById('mynum').placeholder=origpl;
} else {
atst=origpl.substring(0,iorigpos);
document.getElementById('mynum').placeholder=origpl.substring(iorigpos) + atst;
}
}

function maybechange(opto) {
disturb=false;
var thenum=document.getElementById('mynum').value.trim().replace(/\ /g,','), anums=[], wasih=opto.innerHTML, newih='', ij=0, ii=0, fnd=false, fromstr='', tostr='';
if (thenum.replace(/\./g,'').replace(/\,/g,'').replace(/\-/g,'').trim() != '') {
if (thenum.replace(/\./g,'').replace(/\,/g,'').replace(/\-/g,'').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,'') == '') {
anums=('' + thenum).trim().replace(/\ /g,',').split(',');
for (ij=0; ij<anums.length; ij++) {
fnd=false;
ii=Math.abs(ii);
fromstr='';
//alert('ii=' + ii + ' anums.length=' + anums.length);
while (ii < eval('' + wasih.length) && ii >= 0) {
if (!fnd && wasih.substring(ii).substring(0,1) >= '0' && wasih.substring(ii).substring(0,1) <= '9') {
fnd=true;
fromstr=wasih.substring(ii).substring(0,1);
ii++;
while (wasih.substring(ii).substring(0,1) == '.' || (wasih.substring(ii).substring(0,1) >= '0' && wasih.substring(ii).substring(0,1) <= '9')) {
fromstr+=wasih.substring(ii).substring(0,1);
ii++;
}
if (newih == '') { newih=wasih; }
//if (ij > 0) {
//alert('Ii=' + ii + ' anums.length=' + anums.length + ' ij=' + ij + ' newih=' + newih + ' fromstr=' + fromstr + ' and the rest is ' + wasih.substring(ii));
//}
newih=newih.replace(fromstr + wasih.substring(ii), '' + anums[ij] + wasih.substring(ii));
ii=eval(0 - ii);
} else {
ii++;
}
}
}
}
}
if (newih != '') {
if (confirm('Change ' + wasih + ' to ' + newih)) {
opto.innerHTML=newih;
document.getElementById('mynum').value='';
}
}
disturb=true;
}

function maybesend(evt) {
var ao=null;
if (evt.target.value.indexOf('@') != -1) {
ao=document.createElement('a')
ao.target='_top';
ao.href='mailto:' + evt.target.value.trim() + '?subject=My%20Dappled%20Light%20Scene&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + encodeURIComponent(document.body.innerHTML));
ao.click();
} else if (evt.target.value.trim() != '' && evt.target.value.trim().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,'') == '') {
ao=document.createElement('a')
ao.target='_top';
ao.href='sms:' + evt.target.value.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#' + encodeURIComponent(document.body.innerHTML));
ao.click();
}
evt.target.value='';
}

function butjustlook(mwc) {
var mprefix='';
if (mwc.value.indexOf(':') == -1 && mwc.value.indexOf('/') == -1 && (' ' + mwc.value).slice(-5).indexOf('.') != -1) {
mprefix='/';
}
if (mwc.value.indexOf(':') != -1 || (mprefix + mwc.value).indexOf('/') != -1) { // && mwc.value.indexOf(';') != -1) {
if ((mprefix + mwc.value).indexOf('data:') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("' + (mprefix + mwc.value) + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('http') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + (mprefix + mwc.value).split('//')[1] + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('//') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + (mprefix + mwc.value).split('//')[1] + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('/') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value) + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('./') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value).substring(1) + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('../') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value).substring(2) + '")' + brest;
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else {
document.getElementById('mysel').size='' + eval(1 + eval('' + document.getElementById('mysel').size));
document.getElementById('mysel').innerHTML+="<option value='" + mwc.value.split(':')[1].trim().split('(')[0].split(';')[0].trim() + "' id='opt" + mwc.value.split(':')[1].trim().split('(')[0].split(';')[0].trim() + "' ontouchend=maybechange(this); oncontextmenu=maybechange(this);>" + (mprefix + mwc.value).split(';')[0] + ';</option>';
}
mwc.value='';
}
return true;
}

function arlook() {
if (arwo) {
absare=arwo.document.getElementsByTagName('img');
for (iabs=0; iabs<absare.length; iabs++) {
if (('' + absare[iabs].id).indexOf('gb') == 0) {
if (document.getElementById('myaudios').innerHTML.indexOf(absare[iabs].src) == -1) { // && absare[iabs].outerHTML.indexOf(' data-done') == -1) {
document.getElementById('myaudios').innerHTML+=absare[iabs].outerHTML.replace('gb','gb' + acount).replace("<img ","<img style=display:none; data-duration=0 onloadedmetadata=\"this.setAttribute('data-duration','' + this.duration);\" ") + '<br>';
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=absare[iabs].src;
document.getElementsByTagName('div')[0].style.backgroundImage='url(' + absare[iabs].src + ')';
} else {
lasturl=absare[iabs].src;
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
acount++;
document.getElementById('alocal').innerHTML='📁';
}
}
}
}
}

if (document.URL.indexOf('#') != -1) {
setTimeout(function(){
document.body.innerHTML=decodeURIComponent(document.URL.split('#')[1]);
fixtitle(document.getElementById('dstyles').innerHTML);
}, 2000);
}

setInterval(arlook, 2000);
setTimeout(toggleit, 3000);

</script>
</head>
<body><div title='' class="background-image" style="width:100%;height:100%;"></div>
<div id=mc style='position:absolute;top:5%;left:calc(100% - 590px);display:none;opacity:0.8;background-color:rgba(127,127,127,0.6);border:13px dashed rgba(0,255,0,0.3);'>
<select style=background-color:rgb(234,232,247); id=mysel size=34 onchange=assess(false,this); multiple>
<option value='' id=optone>Dappled Light - RJM Programming - April, 2025 ... can pick combinations of CSS effects below</option>
<option value='contain'>background-size: contain;</option>
<option value='cover'>background-size: cover;</option>
<option value='repeat'>background-repeat: repeat;</option>
<option value='auto'>background-size: auto;</option>
<option value='no-repeat'>background-repeat: no-repeat;</option>
<option value='background-position' id=optbackground-position ontouchend=maybechange(this); oncontextmenu=maybechange(this);>background-position: 0% 0%;</option>
<option value='background-origin' title='Can have padding-box or border-box or content-box or inherit or initial'>background-origin: border-box;</option>
<option value='background-clip' title='Can have padding-box or border-box or content-box or inherit or initial'>background-clip: content-box;</option>
<option value='background-blend-mode' title='Can have normal or multiply or screen or overlay or darken or lighten or color-dodge or saturation or color or luminosity'>background-blend-mode: multiply;</option>
<option value='background-attachment' title='Can have scroll or fixed or local or initial or inherit'>background-attachment: fixed;</option>
<option value='transform-origin' id=opttranform-origin ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform-origin: 500px 500px;</option>
<option value='rotate' id=optrotate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform: rotate(120deg);</option>
<option value='scale' id=optscale ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform: scale(0.5,0.5);</option>
<option value='translate' id=opttranslate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>translate: -200px 60px;</option>
<option value='top left'>background-position: top left; /* for multiple backgrounds */</option>
<option value='top center'>background-position: top center; /* for multiple backgrounds */</option>
<option value='top right'>background-position: top right; /* for multiple backgrounds */</option>
<option value='center left'>background-position: center left; /* for multiple backgrounds */</option>
<option value='center center'>background-position: center center; /* for multiple backgrounds */</option>
<option value='center right'>background-position: center right; /* for multiple backgrounds */</option>
<option value='bottom left'>background-position: bottom left; /* for multiple backgrounds */</option>
<option value='bottom center'>background-position: bottom center; /* for multiple backgrounds */</option>
<option value='bottom right'>background-position: bottom right; /* for multiple backgrounds */</option>
<option value='blur' id=optblur ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: blur(5px);</option>
<option value='grayscale' id=optgrayscale ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: grayscale(100%);</option>
<option value='hue-rotate' id=opthue-rotate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: hue-rotate(90deg);</option>
<option value='invert' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: invert(70%);</option>
<option value='drop-shadow' id=optdrop-shadow ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: drop-shadow(8px 8px 10px gray);</option>
<option value='brightness' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: brightness(150%);</option>
<option value='contrast' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: contrast(80%);</option>
<option value='sepia' id=optsepia ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: sepia(100%);</option>
<option value='saturate' id=optsepia ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: saturate(180%);</option>
<option value='opacity' id=optopacity ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: opacity(25%);</option>
</select><br><br>
<button id=mybut onclick=assess(true,document.getElementById('mysel')); style=background-color:yellow;>Display</button>      <input onfocus='disturb=false;' onlosefocus='disturb=true;' onblur='disturb=butjustlook(this);' title='Is applied to right click or gestured number option wording above. For more than one number comma separate. Will accept a relative or absolute image URL to represent background image data to display. Will accept a whole CSS clause of your own eg. filter: sepia(54%);' placeholder='But my CSS number is ...' id=mynum value=''></input>      <input onfocus='disturb=false;' onlosefocus='disturb=true;' onblur='disturb=true; maybesend(event);' title='Email or SMS to' placeholder='Email or SMS to ...' id=myes value=''></input>  <a style=text-decoration:none;cursor:pointer; onclick=" document.getElementById('alocal').innerHTML='📂'; if (arwo) { if (!arwo.closed) { arwo.close(); } arwo=null; } arwo=window.open('/HTMLCSS/client_browsing.htm','_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400');" target=_blank id=alocal title='Local image file browsing.'>📁</a>
</div>
<div id=dstyles></div>
<div id=myaudios></div>
</body>
</html>