(Bitte auf „SKIP INTRO“ klicken!)
<html>
<head></head>
<body>
<script>
// version: 240419-0135
function d( v ) {
document.write( v );
} // function
function click_squ_el( id ) {
if ( status_ar[id] == 0 ) {
document.getElementById( "grey_" + id ).src = img_dark;
status_ar[id] = 1;
document.getElementById( "output" ).value = status_ar;
} else {
document.getElementById( "grey_" + id ).src = img_light;
status_ar[id] = 0;
document.getElementById( "output" ).value = status_ar;
} // if/else
} // function
function click_load() {
var str = document.getElementById( "output" ).value;
var ar = str.split(",");
var l = ar.length;
var i, el;
for ( i=0; i<l; i++ ) { // loop through status array
el = ar[i];
if ( el == 1 ) {
document.getElementById( "grey_" + i ).src = img_dark;
} else {
document.getElementById( "grey_" + i ).src = img_light;
} // if/else
status_ar[i] = el;
} // for
} // function
var l = prompt( 'a x a square elements: Please enter a!', 5 );
var n = prompt( 'Please enter number of characters!', 50 );
var px = prompt( 'a x a pixels: Please enter a!', 25 );
var img_light = "https://webspacejungle.com/kromberg/pixels/grey_light.png";
var img_dark = "https://webspacejungle.com/kromberg/pixels/grey_dark.png";
var i, j, k, c;
c = 0;
for ( k=0; k<n; k++ ) { // loop all characters ("a x a" square elements group)
for ( i=0; i<l; i++ ) { // width of square elements group
for ( j=0; j<l; j++ ) { // height of square elements group
d( '<img src="' + img_light + '" height="' + px + '" width="' + px + '" id="grey_' + c + '" onclick="click_squ_el( ' + c + ' )"> ' );
c++;
} // for
d( '<br>' );
} // for
d( '<hr>' )
} // for
var status_ar = [];
for ( i=0; i<( l * l * n ); i++ ) { // loop through all squares
status_ar[i] = 0;
} // for
document.getElementById( "output" ).innerHTML = status_ar;
</script>
<textarea id="output" rows="100" cols="25"></textarea>
<hr>
<button onclick="click_load()">Load</button>
</body>
</html>