<html>
<head>
<title>Interactively Change Background Image on Scroll - RJM Programming - September, 2023 ... thanks to https://www.w3schools.com/howto/howto_css_bg_change_scroll.asp and http://picsum.photos/ (Lorem Picsum)</title>
<script type=text/javascript>
var sixhundred='600';
var fourhundred='400';
var tcont=location.search.split('mywords=')[1] ? decodeURIComponent(location.search.split('mywords=')[1].split('&')[0]) : 'TEXT';
var prefix=location.search.split('prefix=')[1] ? decodeURIComponent(location.search.split('prefix=')[1].split('&')[0]) : '//picsum.photos/';
var backimg=location.search.split('bimg=')[1] ? decodeURIComponent(location.search.split('bimg=')[1].split('&')[0]) : '';
var mode='dw';
var suffix='/';
var tlen=eval('' + tcont.length);
var twidth=300;
var thispadding=52;
var lastw=-1;
var doask=true;
var ten=25;
var midbit='600/400';
var cis='pointer';
var ptc='#';
var iptc=0;
var btlist=[];
var vsbtlist=[];
var omo='';

var zhr=null;
var zform=null;
var rawhtml='';

var filterlist="emboss edge negedge sharpen boxblur grayscale gaussianblur selectiveblur negate colourizered colourizegreen colourize colourizeblue pixellate smooth contrast brightness sketchy flipvertical fliphorizontal flip scale crop merge transparent rotation";

function defmaybe(inu, altinu) {
var retomo=omo;
if (inu.indexOf(altinu) == -1 || altinu.trim() != '') {
return '//www.rjmprogramming.com.au/ITblog/' + altinu;
}
if (omo != '') {
omo='';
return retomo;
}
return inu;
}

function stateChanged() {
var inm=1, jnm=1, thebtitle='';
if (zhr.readyState == 4) {
if (zhr.status == 200) {
rawhtml = zhr.response;
console.log('rawhtml=' + rawhtml);
if (rawhtml.indexOf('random=') != -1 && vsbtlist.length > 0) {
var rawrs=rawhtml.split('random=');
for (inm=1; inm<rawrs.length; inm++) {
for (jnm=0; jnm<vsbtlist.length; jnm++) {
if (vsbtlist[jnm].indexOf('?random=' + rawrs[inm].split(String.fromCharCode(10))[0]) != -1) {
console.log('found ...');
thebtitle=rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10))[eval(-1 + rawhtml.split('?random=' + rawrs[inm].split(String.fromCharCode(10))[0])[0].split(String.fromCharCode(10)).length)];
//console.log(thebtitle);
document.getElementById(vsbtlist[jnm].split('?')[0]).title=thebtitle + ' ... you can right click to navigate there';
document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseout=function(){ omo=''; };
document.getElementById(vsbtlist[jnm].split('?')[0]).onmouseover=function(){ omo='//www.rjmprogramming.com.au/ITblog/' + thebtitle.split(' (')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-"); };
document.getElementById(vsbtlist[jnm].split('?')[0]).oncontextmenu=function(event){ window.open(defmaybe('//www.rjmprogramming.com.au/ITblog/' + thebtitle.split(' (')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-"), event.target.title.split(' (')[0].split(' ... ')[0].toLowerCase().replace(String.fromCharCode(35), "").replace(".", "").replace(".", "").replace(".", "").replace("+", "").replace("+", "").replace("'", "").replace('%27','').replace(/\//g, "").replace(/,/g, "").replace("---","-").replace("---","-").replace(/--/g,"-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-").replace(" ","-")),'_blank','top=50,left=50,width=800,height=800'); };
}
}
}
}
}
}
}

function ajaxit() {
zhr = new XMLHttpRequest();
zhr.onreadystatechange=stateChanged;
zhr.open('get', '//www.rjmprogramming.com.au/ptitledata.html?random=' + Math.floor(Math.random() * 196756453), true);
zhr.send(null);
}

function prefireup() {
tcont=document.getElementById('mytdiv').innerText;
tlen=eval('' + tcont.length);
if (tcont != 'TEXT') { checkit(); }
fireup();
}

function fireup() {
vsbtlist=[];
for (var i=1; i<=6; i++) {
vsbtlist.push('dimg' + i + '?random=' + Math.floor(Math.random() * 198765643) + ptc.substring(iptc).split('#')[0].replace('&ptitlecollect=y','')); // vs ptitlecollect=y
console.log(vsbtlist[eval(-1 + i)].replace(vsbtlist[eval(-1 + i)].split('?')[0],''));
document.getElementById('dstyle').innerHTML+='<style> .img' + i + ' { background-image: url("' + prefix + midbit + suffix + vsbtlist[eval(-1 + i)].replace(vsbtlist[eval(-1 + i)].split('?')[0],'') + '); } </style>';
}
if (iptc == 1) {
setTimeout(ajaxit, eval(ten * 450)); // used to be 100
}
if (backimg.toLowerCase().replace(/\ /g,'') == 'lorempicsum' && mode != 'dw') { preask(); }
if (tcont.trim() == '' && cis == 'pointer') {
cis='none';
document.getElementById('dstyle').innerHTML+='<style> #mytdiv { cursor: none; } </style>';
document.getElementById('outthere').focus();
} else if (tcont.trim() != '' && cis == 'none') {
cis='pointer';
document.getElementById('dstyle').innerHTML+='<style> #mytdiv { cursor: pointer; } </style>';
}
setTimeout(fireup, eval(ten * 1000));
}

function get_tex_width(txt, font) { // thanks to https://stackoverflow.com/questions/31305071/measuring-text-width-height-without-rendering
this.element = document.createElement('canvas');
this.context = this.element.getContext("2d");
this.context.font = font;
return this.context.measureText(txt).width;
}

function checkit() {
var thisw=get_tex_width(tcont, "80px Arial");
if (eval(thispadding + thisw) > eval('' + twidth)) {
if (lastw > 0) {
twidth += eval(thisw - lastw);
document.getElementById('dstyle').innerHTML+='<style> .bg-text { width: ' + twidth + 'px; } </style>';
lastw=twidth;
} else {
twidth=eval(thispadding + thisw);
document.getElementById('dstyle').innerHTML+='<style> .bg-text { width: ' + twidth + 'px; } </style>';
lastw=twidth;
}
}
if (lastw < 0) {
lastw=thisw;
}
}

function prehere(evt) {
if (evt.keyCode == 8 || evt.keyCode == 46) {
tlen--;
if (tlen <= 0) {
tcont='';
tlen=0;
} else {
tcont=tcont.substring(0,tlen);
}
} else if (evt.altKey || evt.ctrlKey) {
tlen=tlen;
} else {
tlen++;
if (eval('' + evt.keyCode) == 187 || eval('' + evt.keyCode) == 189 || eval('' + evt.keyCode) == 190 || eval('' + evt.keyCode) == 32) {
tcont+=' ';
} else if (eval('' + evt.keyCode) >= 65 && eval('' + evt.keyCode) <= 90) {
if (evt.shiftKey) {
tcont+=String.fromCharCode(evt.keyCode);
} else {
tcont+=String.fromCharCode(eval(32 + evt.keyCode));
}
} else if (eval('' + evt.keyCode) >= 48 && eval('' + evt.keyCode) <= 57) {
tcont+=String.fromCharCode(evt.keyCode);
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
tcont+=String.fromCharCode(eval(-65 + evt.keyCode));
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
tcont+=String.fromCharCode(evt.keyCode);
} else if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
tlen--;
} else {
tcont+=' ';
}
}
checkit();
//document.title='there ' + tlen + ' ' + twidth + ' versus ' + tcont + ' ' + get_tex_width(tcont, "80px Arial") + ' ... ' + evt.keyCode;
}

function lpask() {
doask=false;
backimg='lorempicsum';
mode='';
preask();
setTimeout(function(){ doask=true; }, eval(ten * 1000));
}

function ask() {
var mentionmode='back';
// //www.rjmprogramming.com.au/ITblog/600/400edge[-1, -1, -1], [-1, 4, -1], [-1, -1, -1]/
if (doask) {
var ansis=prompt('Optionally type in background source URL prefix [' + prefix + midbit + suffix + '] ( or use Lorem Picsum or for blog images try //www.rjmprogramming.com.au/ITblog/' + sixhundred + '/' + fourhundred + '/ (and can optionally wedge in an Image Filter in amongst words below (plus add your own arguments), or Topic of Interest appended to those numbers, where + is a space, if you wish eg. //www.rjmprogramming.com.au/ITblog/' + sixhundred + '/' + fourhundred + 'Google+Chart/ )), hashtag delimited from optional seconds image refresh rate [' + ten + '], hashtagged from optional Text background image (or Lorem Picsum), hashtagged from optional Text wording [' + tcont + '] we will assume involves a space.', ' ' + filterlist);
if (ansis != null) {
if (ansis.replace(filterlist,'').trim() != '') {
var things=ansis.replace(filterlist,'').replace(/colorize/g, 'colourize').replace(/COLORIZE/g, 'COLOURIZE').split('#');
for (var ii=0; ii<things.length; ii++) {
if (things[ii].trim() != '') {
if (things[ii].trim().substring(0,1) >= '0' && things[ii].trim().substring(0,1) <= '9') {
ten=eval(things[ii].trim());
} else if (things[ii].trim().indexOf(' ') != -1 && things[ii].trim().toLowerCase().replace(/\ /g,'') != 'lorempicsum') {
alert(things[ii]);
var ourrestis='', fls=filterlist.split(' ');
for (var ifls=0; ifls<fls.length; ifls++) {
if (things[ii].toLowerCase().indexOf(fls[ifls]) != -1) {
ourrestis=things[ii].toLowerCase().split(fls[ifls])[1].split('/')[0];
if (encodeURIComponent(ourrestis.replace(/\ /g,'')) != ourrestis) {
things[ii]=things[ii].replace(ourrestis, encodeURIComponent(ourrestis.replace(/\ /g,'')));
}
}
}
document.getElementById('mytdiv').innerHTML = things[ii];
tcont=things[ii];
tlen=eval('' + tcont.length);
setTimeout(checkit, 5000);
} else if (mentionmode == 'back') {
mentionmode='';
if (things[ii].trim().toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
midbit='/600/400';
suffix='/';
prefix='//picsum.photos/';
iptc=0;
ptc='#';
} else {
midbit='';
suffix='';
prefix=things[ii].trim();
if (prefix.indexOf('rjmprogramming.com.au/ITblog') != -1) {
iptc=1;
ptc='#591734';
} else {
iptc=0;
ptc='#';
}
}
} else {
if (things[ii].trim().toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
backimg='lorempicsum'; // '//picsum.photos/600/400/';
} else {
backimg=things[ii].trim();
}
mode='';
preask();
}
}
}
}
}
}
//doask=true;
}

function preask() {
if (backimg.trim() != '') {
if (backimg.toLowerCase().replace(/\ /g,'') == 'lorempicsum') {
backimg='//picsum.photos/600/400' + suffix + '?random=' + Math.floor(Math.random() * 198765643) + ptc.substring(iptc).split('#')[0].replace('&ptitlecollect=y',''); // vs ptitlecollect=y
if (mode == 'dw') {
mode='';
document.write('<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>');
} else {
document.getElementById('dstyle').innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>';
}
backimg='lorempicsum';
} else {
if (mode == 'dw') {
mode='';
document.write('<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>');
} else {
document.getElementById('dstyle').innerHTML+='<style> .bg-text { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + backimg + '"); background-size: contain; background-repeat: repeat; text-shadow:-2px 2px 2px #ff2d95; opacity: 0.9; } </style>';
}
}
}
}

</script>
</head>
<body ondblclick=lpask(); onclick=setTimeout(ask,2000); onload=prefireup(); title="Interactively Change Background Image on Scroll - RJM Programming - September, 2023 ... thanks to https://www.w3schools.com/howto/howto_css_bg_change_scroll.asp and http://picsum.photos/ (Lorem Picsum) ... click to be able to further change the Text element background image or the source for the overall background images or image refresh delay in seconds or text wording itself, while double click starts using Lorem Picsum for Text element background image purposes.">
<div class="bg-image img1" id=dimg1></div>
<div class="bg-image img2" id=dimg2></div>
<div class="bg-image img3" id=dimg3></div>
<div class="bg-image img4" id=dimg4></div>
<div class="bg-image img5" id=dimg5></div>
<div class="bg-image img6" id=dimg6></div>
<script type=text/javascript>
document.write('<div id="mytdiv" spellcheck="false" onclick="event.stopPropagation();" class="bg-text" contenteditable=true onkeydown="prehere(event);" onblur="tcont=this.innerText; tlen=eval(tcont.length); checkit();">' + tcont + '</div>');
</script>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

* {
box-sizing: border-box;
}

.bg-image {
/* Full height */
height: 50%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* Images used */
.img1 { background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg"); }
.img3 { background-image: url("img_lights.jpg"); }
.img4 { background-image: url("img_nature.jpg"); }
.img5 { background-image: url("img_forest.jpg"); }
.img6 { background-image: url("img_woods.jpg"); }

/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
font-size: 80px;
border: 10px solid #f1f1f1;
position: fixed; /* Stay fixed */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 300px;
padding: 20px;
text-align: center;
}
</style>
<div id=dstyle>
<script type=text/javascript>
preask();
</script>
</div>
<input id=outthere type=text style='position:absolute;top:-500px;left:-500px;' value=''></input>
</body>
</html>