<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=10;
var midbit='600/400';
var cis='pointer';

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

function fireup() {
for (var i=1; i<=6; i++) {
document.getElementById('dstyle').innerHTML+='<style> .img' + i + ' { background-image: url("' + prefix + midbit + suffix + '?random=' + Math.floor(Math.random() * 198765643) + '); } </style>';
}
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';
if (doask) {
var ansis=prompt('Optionally enter in background source URL prefix [' + prefix + midbit + suffix + '] ( or type Lorem Picsum or for blog posting images you could try //www.rjmprogramming.com.au/ITblog/' + sixhundred + '/' + fourhundred + '/ ), hashtag delimited from an optional imagery refresh rate in seconds [' + ten + '], hashtag delimited from an optional Text element background image (or type Lorem Picsum), hashtag delimited from optional Text wording [' + tcont + '] we will assume involves a space.', '');
if (ansis != null) {
if (ansis.trim() != '') {
var things=ansis.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') {
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/';
} else {
midbit='';
suffix='';
prefix=things[ii].trim();
}
} 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);
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"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></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>