Robert James Metcalfe Blog

Some programming problem solutions benefit from …

1. “standing back a bit”, not getting too emotionally agitated by it, especially if either …
   • it is just an annoyance, and there is an alternative workflow a user can use to get to the functionality
   • it is not mission critical to anything

   … but, at least even there …

2. note down the issue in writing … and …
3. if no immediate thought comes to mind … there’s nothing wrong with “stewing on it”

For instance, we’ve had a long running case involving …

1. at this WordPress blog …
2. as far as we could tell, iPad users only … could …
3. tap the tutorial image, and rather than get taken to the “Cut to the Chase” action (perhaps web application) of interest … they would instead …
4. get taken to the “right click/tap on a tutorial image at this WordPress blog” logic

We categorize this, around here, as …

• “that’s peeving” (if “peeving” is a word, that is) … and …
• “are we peeved?” …
  

  Stay schtum. Stay calm.

  …

  my body is a temple

• because of the reasons outlined above … but …

Today’s the day … yay!!!!!!

So, in “full flow debugging style awareness” what is the “key phrase” in the description of the issue, above?

We’d say “iPad users only” definitely, because no matter what debugging we do with Apple white leads joining up Safari browser iPad and MacBook Air debugging windows we do (and don’t get me wrong, this did help get the outerHTML of an img element in question, which was useful) clear thinking would reask (the “platform” and “environment” related) …

Why only on iPad (when it doesn’t happen on iPhone)?

… question because, in our experience …

That’s the unusual thing about the issue. And if we’d been on the ultimate ball we’d have noted that that discovery we outline below was made using an iPad!

And then we remembered back to the recent Canvas Interfacer Mobile Image Map Tutorial‘s discovery that …

… our changes being helped out by the discovery that our previous …


if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// is identified around here as a mobile platform
}


… was a bit unreliable identifying mobile iOS platform Safari web browser usage, but this useful link got us to refine that thinking to …


if ( navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) > 0 ) {
// is better identified around here as a mobile platform
}


… with more success. Yayyyyy!

… so we bit the bullet and applied this discovery’s changes to the good ol’ header.php of our TwentyTen themed WordPress blog “go to” piece of code. Yes, good to do, but we found, still no Havana cigar!

So then, relook at the outerHTML of the img element in question. It looked like …


<img decoding="async" tabindex="0"
oncontextmenu="imgedit(event);"
ontouchend="imgedit(event);"
onload="altanimation(this,this.id,this.src);"
onerror="altunzipit(this,this.id,this.src);"
style="border: 15px solid pink; margin-left: -20px;"
alt="Camera App on iOS Revisit Tutorial"
src="//www.rjmprogramming.com.au/Mac/iPhone/camera_app_revisit.gif"
title="Camera App on iOS Revisit Tutorial"
id="igm1790668">


… and that ontouchend=”imgedit(event);” is a clue to follow. Indeed, it took us to the “image right click logics” contained in the changed onrightclick.js external Javascript logic designed for right click analysis. What if it’s “mobile check booleans” need this updating too? And yes, that fixed the issue.

Ahhhhhh!

---

Previous relevant Canvas Interfacer Mobile Image Map Tutorial is shown below.

On the same themes as yesterday’s Canvas Interfacer Three Finger Gesture Usage Tutorial‘s …

• mobile platform chance to have three finger gestures help with scrolling functionality … today we have it so that …
• mobile platforms are better suited creating Image Maps via canvas and image based inhouse web application (looking out for 🗺️🖼️ emoji button means to create Image Map when ready, as a double click on the canvas can do as well)

… our changes being helped out by the discovery that our previous …


if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// is identified around here as a mobile platform
}


… was a bit unreliable identifying mobile iOS platform Safari web browser usage, but this useful link got us to refine that thinking to …


if ( navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) > 0 ) {
// is better identified around here as a mobile platform
}


… with more success. Yayyyyy!

Along the way the HTML textarea elements used to identify Image Map _subelement area rectangular limits have their disabled attribute set, which has the benefit …

• that there is no need to allow any focus to these textarea elements when nothing any user can enter into them would make any difference anyway … and yet …
• at least on non-mobile platforms the useful resizing talents of textarea elements are not stopped because of the disabled attribute being set

We found that the URL usage …


https://www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm#imagemap=url


… had become a little obsolete (at least, regarding the emoji button workflow), in the sense that, like with the canvas ondblclick event (ie. double click) functionality, why not, when clicking that 🗺️🖼️ Image Map creator emoji button grab the contents of the canvas already displaying as the default content presented to the “potential” (ie. it depends, sometimes, whether you double click that canvas element the next time) Image Map creation session^?

Relevant to Random Background Image Map Area Polygons Tutorial and the decision then regarding non-mobile platforms to use an initial click followed by right clicks to enable Image Map area element shape=poly components, today, thinking with respect to mobile platforms, we’ve decided Image Map area element shape=poly components can be created via an initial click followed by double click sequences and going back to the polygon start, with either platform type, ending the polygon with two separated clicks. Also relevant to that same tutorial and it’s pointer-events:none; discovery, today’s mobile work regarding the textarea elements plotted to show the rectangular limits of user defined areas already created we found “real world relevance” to applying this to mobile such textarea elements. That is because on some mobile platforms these textarea elements will never be able to be resized out of the way, but if we apply pointer-events:none; to these, it does not matter, as the user can, as required, click/touch through these overlay^ed elements that have a huge z-index and semi-transparency applied to them.

Again, perhaps on a mobile platform web browser, feel free to try …

• a changed random_background.htm Random Background via Lorem Picsum Image Map savvy web application … uses …
• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by …
• the changed signature_signature.js external Javascript

Did You Know?

There are known Safari mobile web browser textarea resizing limitations as we discovered trying a Google search of allow textarea resizing on mobile safari web browser, thanks, that we gleaned from the use of …

Solution 2: Standard JavaScript Auto-Grow
If you need to support older versions of iOS Safari that lack the newest CSS specs, you can dynamically update the box height using a tiny JavaScript event listener. This removes the scrollbar and expands the container vertically as they type:

HTML: html
<textarea id=”mobile-textarea” rows=”3″ oninput=”autoGrow(this)”></textarea>

JavaScript: javascript
function autoGrow(element) {
element.style.height = “auto”;
element.style.height = (element.scrollHeight) + “px”;
}

… incorporated ideas to help here.

---

Previous relevant Canvas Interfacer Three Finger Gesture Usage Tutorial is shown below.

There’s more research needed around here regarding mobile platform usage to the HTML⁵ canvas based ideas swirling around yesterday’s Random Background Image Map Area Polygons Tutorial‘s work, and one issue we came across was …

• on mobile platforms you can get to gesture results whereby the canvas is all you see on the screen (eg. of an iPhone) …
• but what if you are in “scribble mode” at that point^? …
• before today, we were having trouble using …
  1. two finger “pinch” gesture to zoom out … or …
  2. one finger “swipe” to reveal more to the right (where, if we could have reached it, that right hand menu of annotation options has none of these “scribble mode” oddities) … because …
  3. before today, that last idea just drew a “scribble” “free drawing” line to the canvas

  … to reach the menu or any other non-canvas element not in “scribble mode” (ie. scrolling could not be achieved, at least in a way we could immediately access)

And so, we asked Google, thanks, “detect three finger gesture and if so scroll in the direction indicated” and got this useful advice …

Web Implementation (JavaScript)

If you are building this for a website or web app, you can use the touchstart and touchmove events to capture finger coordinates, check if exactly three fingers are on the screen, and then calculate the direction.

… to (start with global … var isthree=false; and) end up with …


if (eval('' + event.touches.length) >= 3 && event.type == "touchstart") {
isthree=true;
return;
} else if (isthree && event.type == "touchend") {
//if (isthree) {
isthree=false;
window.top.scrollBy(200,0);
return;
//}
}


… near the top of our function toptouchHandler(event) Javascript code in our changed signature_signature.js external Javascript canvas interfacer helper.

---

Previous relevant Random Background Image Map Area Polygons Tutorial is shown below.

Further to the recent Random Background Alternate Image Source Tutorial …

• Image Map only allowing for area _subelements with shape=rect … today we also allow for …
• Image Map now allowing for area _subelements with shape=poly …

… via …

Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.

… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.

That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?

Yes, a hosting HTML div of a specific width and height and position^ed absolute^ly at a precise left and top screen position allows SVG innerHTML like …


<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg>
... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.

Feel free to try ...

• Random Background via Lorem Picsum Image Map savvy web application ... uses ...
• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

Did You Know?

We broached the idea "pass event logic down through even though an element has a bigger z-index" to Google, thanks, and got back ...

To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.

... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!

---

Previous relevant Random Background Alternate Image Source Tutorial is shown below.

Onto the recent Random Background Image Map Integration Tutorial's web application's use of ...

• Lorem Picsum image repository "source" of image data ... today we allow the user to, instead, get images from ...
• RJM Programming WordPress Tutorial Images (ie. this WordPress_.org blog)

... and we've shored up the copy and pasting of screen logic, so that ...

• the screen is more filled with image data, and the relevant graphical pasting place "border enhanced", in the process ...
• the images have better resolution, in the process

... as the two areas of improvement within ...

• a changed random_background.html and then further changed random_background.htm's Random Background via Lorem Picsum Image Map savvy web application ... uses ...
• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

... regarding it's new^ish Random Image Map integrations.

---

Previous relevant Random Background Image Map Integration Tutorial is shown below.

Like with ...

• yesterday's Inhouse Image Map WordPress Integration Tutorial we continue with Image Map functionality integrations ... today where ...
• we are revisiting the random backgrounds themes of Random Background Webpage Masking Tutorial's use of the great Lorem Picsum repository of random images

... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.

We've chosen ...

• the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
• if using a macOS operating system a ...
  1. control-command-shift-3
  2. control-command-shift-5

  ...
  
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();

//var kc=eval(-2 + event.keyCode);

event.preventDefault();
event.stopImmediatePropagation();

// Create a fake event with a modified code (e.g., ArrowDown)
const simulatedEvent = new KeyboardEvent("keydown", {
key: "3",
code: "Digit3",
ctrlKey: true,
metaKey: true,
shiftKey: true
}); // keyCode: kc, bubbles: true, cancelable: true,

// Fire the fake event into the DOM
event.target.dispatchEvent(simulatedEvent);

if (immap && !holdoff) { holdoff=true; setTimeout(function(){ wowo=window.open('/HTMLCSS/user_of_signature_signature.htm?askforpaste=y&imagemap=url#' + myco.toDataURL('image/jpeg',0.4), '_blank', 'top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height)); setTimeout(function(){ holdoff=false; }, 8000); }, 2000); }

console.log('Control + Command + Shift + 3 combination detected!');
// Insert your custom logic here
}
});

  ... combination is another modus operandi in play

... within ...

• a changed random_background.html and then further changed random_background.htm's Random Background via Lorem Picsum Image Map savvy web application ... uses ...
• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

... regarding it's new Random Image Map integrations.

---

Previous relevant Inhouse Image Map WordPress Integration Tutorial is shown below.

The recent work of Inhouse Image Map Creator Browsing Tutorial ...

• established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
• allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...


var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}


... as an excerpt from the changed onrightclick.js external Javascript called by WordPress, and calling ...

• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

---

Previous relevant Inhouse Image Map Creator Browsing Tutorial is shown below.

Repeat after me ...

an image is a canvas is an image

?

an image is a canvas is an image

... good, now, again ... an image is a canvas is an image ...

an image is a canvas is an image

... excellent, now, backwards ... egami na si savnac a si egami na ...

egami na si savnac a si egami na

... wow! ... Now, lastly … I want my mamma! Now! ...

I want my mamma! Now!

 

Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image ^{via [canvasContext].drawImage()} is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML⁵ canvas element a new ondblclick event ...


<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>


... allowing that "^on double click" result in the web application turning into an Image Map Creator where now ...

Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' _blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' _blah /> _{... more area elements blah ... blah ... blah ...} <area shape=default nohref alt="" /></map> ) creator

... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!

 

Again, feel free to give this all a go with ...

• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

---

Previous relevant Inhouse Image Map Creator Mobile Debug Tutorial is shown below.

Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...

• Mac Book Air
• Apple white lead
• iPhone

... that once the middle one plugs into the top and bottom allows for ...

• iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
• Mac Book Air Safari web browser Develop -> ^{(in our case)} Robert's iPhone -> user_of_signature_signature.htm

... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!

Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...


<script type=text/javascript>
var oklj=0;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('?fcol=') != -1) {
oklj=oklj;
} else {
document.write("<iframe id=ifconto name=ifconto src='/PHP/animegif/tutorial_to_animated_gif.php#rand=" + Math.floor(Math.random() * 19878675) + "' style='width:100%;height:900px;display:BLOCK;'></iframe>");
}
</script>


... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...


top.document.getElementById('ifconto').src='/About_Us.html';


... ba bow. On mobile, that necessary HTML iframe was non-existant! So, with the external Javascript, at this similar juncture, we came up with ...


if (!top.document.getElementById('ifconto')) {
top.document.body.innerHTML+="<iframe id=ifconto name=ifconto src='/About_Us.html' style='width:100%;height:900px;display:none;'></iframe>";
} else {
top.document.getElementById('ifconto').src='/About_Us.html';
}


... to start getting somewhere, here, with these inhouse Image Map creation ideas on mobile platforms.

And what about ...

1. allow for data URIs pasted into the prompt window
2. create non-mobile rubber banded overlays to help contextualize further

? Huh?! Feel free to give this all a go with ...

• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

---

Previous relevant Inhouse Image Map Creator Interactive Drill Down Tutorial is shown below.

It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...

strike while the iron is hot

... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...

• area _subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
• the content of those local Javascript functions

... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.

And so, today, we now offer ...

Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)

... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...

• the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by ...
• the changed signature_signature.js external Javascript

---

Previous relevant Inhouse Image Map Creator Drill Down Tutorial is shown below.

Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...

• the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
• opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
• that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
• if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera

All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changed signature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.

---

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...

Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' _blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' _blah /> _{... more area elements blah ... blah ... blah ...} <area shape=default nohref alt="" /></map> ) creator

... arrangement inhouse means to construct image maps, so far, just via an image URL.

Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.

No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...

1. we stop user web page scrolling ... while still allowing ...
2. webpage zooming out or in

... in conjunction with ...

• replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
• replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps

... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!

Try this at ...

• the changed user_of_signature_signature.htm Canvas and Image Map web application .. calls on ...
• the changed signature_signature.html Canvas middle conduit web application ... helped out by ...
• the changed signature_signature.js external Javascript

... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlay^ed textarea elements ...

1. containing image map HTML ... and/or ...
2. overlay^ing semi-transparentally to see what has been clicked already

... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.

---

Previous relevant WordPress Blog Image Editing Media Tutorial is shown below.

We're happy to be revisiting ...

• the lead in of WordPress Blog Posting Feature Image Editing Tutorial ... combined with ...
• similarities of task to that of WordPress Visual Synopsis Media Tutorial

... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...

• Video
• Animated GIF

... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...

• window.open
• background image
• background-size: contain

... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...

1. lots of data
2. but understood everywhere

... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsay actual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...


if ((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").indexOf('.') != -1) {
if (top.document.getElementById('slideav' + eval((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").split('.')[0]))) {
if ((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "") >= '1') {
setTimeout(function(){
if (document.getElementById('storyboard') && document.getElementById('toptd')) {
document.getElementById('toptd').innerHTML=document.getElementById('toptd').innerHTML.replace(document.getElementById('storyboard').outerHTML, '  <button onclick="top.videoshow();">Video &#128249;</button>  <button onclick="top.agshow();">Animated GIF &#128444;</button> ' + document.getElementById('storyboard').outerHTML);
}
}, 8100);
}
setInterval(function(){
var mycisv=document.getElementById('topcanvas');
var mycisvcon=mycisv.getContext('2d');
var mycanc=mycisv.toDataURL('data/jpeg', 10);
if (top.document.getElementById('slideav' + eval((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").split('.')[0])).value.length != mycanc.length) {
top.document.getElementById('slideav' + eval((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").split('.')[0])).value=mycanc;
top.agup('slideav' + eval((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").split('.')[0]), mycanc);
top.vdup('slideav' + eval((location.search.split('fcol=')[1] ? decodeURIComponent(location.search.split('fcol=')[1].split('&')[0]) : "").split('.')[0]), mycanc);
}
}, 10000);
}
}


... to look like ...

... appearing in the right cell hosted Annotation Menu tools of the changed user_of_signature_signature.htm inhouse image data fed canvas editor web application.

The fourth draft onrightclick.js external Javascript now includes those onclick logic event functions ...


function agshow() {
var ascr='';
var scris='<scr' + 'ipt type=text/javascript> var ist=0, pref="slideav", thisi="thisimg", dtp=document.title.split(" ... ")[0], dtstwo=" ... looping presentation", dts=" ... " + document.title.split(" ... ")[1]; function startit() { if (!document.getElementById(pref + ist) || ist == 0) { ist=0; document.title=dtp + dts; } else { document.title=dtp + dtstwo; } document.body.style.backgroundImage="URL(" + document.getElementById(pref + ist).value + ")"; ist++; setTimeout(startit, 5000); } setTimeout(startit, 2000); </scr' + 'ipt>';
woagis=window.open('','_blank','top=110,left=110,width=700,height=700');
woagis.document.write('<html><head><title>Animated GIF of selected images ... start of looping presentation ...</title>' + ascr + '</head><body style="background-repeat:no-repeat;background-size:contain;">' + document.getElementById('myimepf').outerHTML + scris + '</body></html>');
}

function videoshow() {
var ascr='';
var scris='<scr' + 'ipt type=text/javascript> var verbs=[" paused"," playing"], ist=0, inc=0, pref="slideav", thisi="thisimg", dtp=document.title.split(" ... ")[0], dtstwo=" ... looping presentation ", dts=" ... " + document.title.split(" ... ")[1]; function startit() { if (!document.getElementById(pref + ist) || ist == 0) { ist=0; document.title=dtp + dts + verbs[inc]; } else { document.title=dtp + dtstwo + verbs[inc]; } document.body.style.backgroundImage="URL(" + document.getElementById(pref + ist).value + ")"; ist+=inc; setTimeout(startit, 1000); } setTimeout(startit, 1000); </scr' + 'ipt>';
wovdis=window.open('','_blank','top=100,left=100,width=700,height=700');
wovdis.document.write('<html><head><title>Video of selected images ... start of looping presentation </title>' + ascr + '</head><body title="Initially paused but on loop when started. Click to toggle between pause and play." onclick="inc=eval(1 - inc);" style="background-repeat:no-repeat;background-size:contain;">' + document.getElementById('myimepf').outerHTML + scris + '</body></html>');
}


... creating those popup window "Video" and/or "Animated GIF" presentations we've been talking about above.

The WordPress Blog TwentyTen theme's header.php gets a crucial new Javascript function referenced elsewhere ...

<?php echo "

function firstuptop() {
var ifnum=1, arrc=['cow', 'ime'], butsuff='', arrbw=['', ' of Selected Images'], arrolp=['vif','ime'];
var utd='<div id=divime style=display:none;>';
for (var jime=0; jime<2; jime++) {
if (jime > 0) {
utd+="</b><br><iframe name=my" + arrc[jime] + "ifr id=my" + arrc[jime] + "ifr style=display:none; src=/About_Us.html></iframe><form target=my" + arrc[jime] + "ifr action=/cowsay.php method=POST id=my" + arrc[jime] + "pf><div id=div" + arrc[jime] + "pf></div><input type=submit id=vlist" + butsuff + " style=display:none;background-color:lightblue; name=vlist" + butsuff + " value='Video &#128249; " + arrbw[jime] + "'></input> <input type=submit style=display:none;background-color:lightblue; id=aglist" + butsuff + " name=aglist" + butsuff + " value='Animated GIF &#128444; " + arrbw[jime] + "'></input></form><table cellpadding=20><tbody><tr></tr></tbody></table></div><p id='backtoblog'></p>";
}
butsuff='ime';
}
utd+='</div>';
document.body.innerHTML+=utd;
}

"; ?>

... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.

---

Previous relevant WordPress Blog Posting Feature Image Editing Tutorial is shown below.

Yesterday's ...

• One Image Website Image Snapshot Editing Tutorial used web browser new tab webpages to allow for image editing and annotating ... but with today's ...
• WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest

And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.

In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...

Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.

We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...


if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}


... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...

<?php

$post->post_content=str_replace('<i' . 'mg' . ' i' . 'd=', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); i' . 'd=', str_replace('<i' . 'mg' . ' s' . 'rc=', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); s' . 'rc=', str_replace('<i' . 'mg' . ' st' . 'yle="border', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle="border', str_replace('<i' . 'mg' . ' st' . 'yle="float', '<i' . 'mg' . ' tabindex=0 oncon' . 'textmenu=imgedit(event); ontou' . 'chend=imgedit(event); st' . 'yle="float', str_replace('<i' . 'mg' . ' deco' . 'ding=', '<i' . 'mg' . ' tabindex=0 onconte' . 'xtmenu=imgedit(event); ontou' . 'chend=imgedit(event); deco' . 'ding=', $post->post_content)))));

?>

... calling new Javascript function ...

<?php echo "

function imgedit(evt) {
if (('' + evt.target.outerHTML.split('>')[0]).indexOf(' class="iiconlist') == -1) {
preonrightclickask(evt);
}
}

"; ?>

Other than header.php WordPress PHP code we changed ...

• a third draft onrightclick.js external Javascript ... and ...
• a changed user_of_signature_signature.htm inhouse image data fed canvas editor web application

---

Previous relevant One Image Website Image Snapshot Editing Tutorial is shown below.

Augmenting yesterday's One Image Website SessionStorage Image Filtering Tutorial adding cropped image editing functionality, we see it as ...

Running against us regarding One Image Website design ..	Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work	way window.prompt freezes all Javascript at a snapshot of time ...
	hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
	[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping

That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).

And then there was "the unknown factor" ...

Can [canvasContext].drawImage draw that image with CSS filter styling applied?

Well, we found using Javascript DOM ahead of the new Image() call ...


xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;


... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...

That [canvasContext].filter is a thaing ... yay!!!

Luckily we didn't need to change One Image Website base HTML to make this happen, but, rather ...

• a second draft onrightclick.js external Javascript ... and ...
• a changed user_of_signature_signature.htm inhouse image data fed canvas editor web application

... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...

Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);

... talking about the three appended spaces needed.

---

Previous relevant One Image Website SessionStorage Image Filtering Tutorial is shown below.

Further to the long ago One Image Website Scrolling Position Fix Tutorial last mention of our inhouse One Image Website series, today we have ...

• clientside image filtering functionality to offer ...
• almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)

Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...

Aaaaaahhhhh

There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!

We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...


if (('' + window.localStorage.getItem(prefss + '_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
if (('' + window.sessionStorage.getItem(prefss + '_filter')).replace(/^undefined/g,'').replace(/^null/g,'') == '') {
window.sessionStorage.setItem(prefss + '_filter', window.localStorage.getItem(prefss + '_filter'));
window.localStorage.removeItem(prefss + '_filter');
} else {
window.localStorage.removeItem(prefss + '_filter');
}
}


... (we figured after a day of tinkering ... so sad).

How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.

And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...

Normal Run ...	Run for All Platforms that Presents an Audio Element You Can Play Immmediately
"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"	"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"

... or you can start them off yourself up at the address bar with (typed in ... or just click) URLs such as ...


https://www.rjmprogramming.com.au/thecommute/?style=filter:invert(100%);


... or ...


https://www.rjmprogramming.com.au/ephemeral/?style=filter:blur(5px);


... or ...


https://www.rjmprogramming.com.au/streetart/?style=filter:hue-rotate(90deg);


... or ...


https://www.rjmprogramming.com.au/pyrmontultimo/?style=filter:sepia(100%);


... or ...


https://www.rjmprogramming.com.au/walkingtrip/?style=filter:saturate(200%);


... or ...


https://www.rjmprogramming.com.au/bygone/?style=filter:contrast(200%);


... or ...


https://www.rjmprogramming.com.au/thewest/?style=filter:brightness(240%);


Did you know?

All this begs the question ...

What about mobile?

Well, at least for iOS we think ...


if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (eval('' + e.touches.length) >= 1) {
onrightclickask();
}
};
}, 4000);
}


... did the job, with a pinch or swipe gesture, of getting us to that Javascript prompt window place, and then the rest is the same!

---

Previous relevant One Image Website Scrolling Position Fix Tutorial is shown below.

Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.

But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...


var recti=document.getElementById(place).getBoundingClientRect();
//document.getElementById("body").scrollTop = Math.floor(Math.random() * document.getElementById("body").scrollHeight);
//document.getElementById("body").scrollLeft = Math.floor(Math.random() * document.getElementById("body").scrollWidth);
document.getElementById("body").scrollTop = Math.max(0,Math.floor(Math.random() * eval(eval('' + recti.height) - eval('' + window.innerHeight))));
document.getElementById("body").scrollLeft = Math.max(0,Math.floor(Math.random() * eval(eval('' + recti.width) - eval('' + window.innerWidth))));


Any white bands you still see now will be caused by that being on the original photograph data stock (we're hoping), in ...

Normal Run ...	Run for All Platforms that Presents an Audio Element You Can Play Immmediately
"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"	"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"

---

Previous relevant One Image Website VTT Tracks Tutorial is shown below.

Using yesterday's Ffmpeg Log Helper Towards VTT File Primer Tutorial VTT files we could choose to use ...

• Audio and Video HTML element track cue functionality VTT file interface ... you can read more about at HTML5 Track Element Primer Tutorial ... or ...
• Develop a home grown [audioElement].currentTime and setInterval arrangement

... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!

Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.

As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...

Normal Run ...	Run for All Platforms that Presents an Audio Element You Can Play Immmediately
"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"	"Ephemeral" "Street Art" "The Commute" "The Inner 'Burbs" "Bygone" "West" "Walking Trip"

... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.

This amounted to Javascript changes, as per ...

index.htm ...
var foreground=null; // and get rid of var in var foreground below var plusstuff=''; function ftchange(tob) { plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com '; if (document.getElementById('place').title.indexOf(' Playing ') == -1) { document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com '; } else { document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com '; } } function xonl() { if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) { document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href'); } else { document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>'; document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic='; document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; }; document.getElementById('thedivlink').target='_blank'; } } function FadeInImage() { var foreground=document.getElementById("place"); window.clearTimeout("FadeInImage('" + "place" + "')"); rotateImage("place"); } function rotateImage(place) { while (number_of_image == 0) { place = place; } xplace=place; //alert('yay2'); anotherNew(); var foreground=document.getElementById(place); //alert(place); var thedivlink=document.getElementById("thedivlink"); var thediv=document.getElementById("thediv"); if (foreground.width > 0) { thedivlink.style.display = "none"; thediv.style.display = "none"; if (document.getElementById('ifmusicone')) { document.getElementById('ifmusicone').style.display='none'; } //alert('yay2a'); var alink=document.getElementById("alink"); var xxxx=alink.href; if (xxxx.indexOf("mp3") != -1) { //alink.href="index-ssm.html"; //alink.onclick="javascript:void(0);"; alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber; alink.onclick="javascript:void(0);"; foreground.onclick="javascript:hasBeenClicked();"; foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff; } else { if (bigrandnumber >= 0) { if (hasbeenclicked == 1 || NumOpen > 0 || does_file_exist("session",bigrandnumber,"txt")) { bigrandnumber = -1; alink.href="upload.php"; //alink.onclick="javascript: window.open('index-ssm.html','Pyrmont, Ultimo - Inner Burbs - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');"; alink.onclick = "javascript:void(0);"; //alink.ondblclick = "javascript:void(0);"; foreground.title="Click for Upload functionality."; alink.target = "_blank"; } } } alink.target = "_blank"; } else { thedivlink.style.display = "block"; thediv.style.display = "block"; } SetOpacity(foreground,0.3); // more rotateImage code follows }
index-ssmhalf.html ...
var mycurt=-1; var vttcont=''; var vtttitles=[]; var vttstartsecs=[]; var vttendsecs=[]; var vttlastt=''; function getct() { if (document.getElementById('myaudio')) { mycurt=document.getElementById('myaudio').currentTime; console.log('ct=' + mycurt); //top.document.title='Current time = ' + mycurt; for (var jjk=0; jjk<vtttitles.length; jjk++) { if (eval('' + mycurt) >= eval(-0.0001 + eval('' + vttstartsecs[jjk])) && eval('' + mycurt) <= eval(0.0001 + eval('' + vttendsecs[jjk]))) { if ((vttlastt != vtttitles[jjk] || vttlastt.trim() != vttlastt) || vttlastt.trim() != vtttitles[jjk] || vttlastt == '') { if (vttlastt.trim() != vtttitles[jjk]) { vttlastt=vtttitles[jjk]; } else { vttlastt+=' '; } console.log('ct title=' + vtttitles[jjk]); if (parent.document.title.indexOf(' - ') != -1) { var huhsare=parent.document.title.split(' - '); if (eval('' + huhsare.length) >= 3) { parent.document.title=(parent.document.title.replace(' - ','`').split(' - ')[0] + ' - ' + 'Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com ').replace('`', ' - '); } else { parent.document.title=parent.document.title.split(' - ')[0] + ' - ' + 'Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } if (parent.document.getElementById('place').title.indexOf(' Playing ') == -1) { parent.document.getElementById('place').title+=' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } else { parent.document.getElementById('place').title=parent.document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } parent.ftchange(vtttitles[jjk]); if (parent.document.getElementById('alink').title.indexOf(' Playing ') == -1) { parent.document.getElementById('alink').title+=' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } else { parent.document.getElementById('alink').title=parent.document.getElementById('alink').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } if (document.getElementById('myaudio').title.indexOf(' Playing ') == -1) { document.getElementById('myaudio').title+=' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } else { document.getElementById('myaudio').title=document.getElementById('myaudio').title.split(' Playing ')[0] + ' Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } } else { parent.document.getElementById('place').title='Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; parent.document.getElementById('myaudio').title='Playing ' + vtttitles[jjk] + ' thanks to http://www.freesoundtrackmusic.com '; } } } } } } function pushit() { var timings=vttcont.split(' --> '); console.log('timings length=' + timings.length); if (eval('' + timings.length) == 1) { //console.log('vttcont=' + vttcont); timings=vttcont.split(' --> '); console.log('Timings length=' + timings.length); } var spares='',sparesa=[], jspare=0.0; var sparee='',spareea=[]; var ispare=0, iifg=0, ifactor=1.0; var thistt=''; if (eval('' + timings.length) > 1) { for (var kkll=1; kkll<timings.length; kkll++) { spares=''; sparee='' ispare=0; while ((timings[kkll].substring(ispare).substring(0,1) >= '0' && timings[kkll].substring(ispare).substring(0,1) <= '9') || timings[kkll].substring(ispare).substring(0,1) == '.' || timings[kkll].substring(ispare).substring(0,1) == ':') { sparee+=timings[kkll].substring(ispare).substring(0,1); ispare++; } console.log('sparee=' + sparee + ' and ispare=' + ispare); while (timings[kkll].substring(ispare).substring(0,1) <= String.fromCharCode(32)) { ispare++; } console.log('ispare=' + ispare); vtttitles.push(timings[kkll].substring(ispare).split(String.fromCharCode(10))[0].split('{')[0]); console.log('title=' + vtttitles[-1 + eval('' + vtttitles.length)]); spareea=sparee.split(':'); ifactor=1.0; jspare=0.0; for (iifg=eval(-1 + eval('' + spareea.length)); iifg>=0; iifg--) { console.log('iifg=' + iifg + ' via ' + spareea[iifg] + '!'); jspare+=eval(ifactor * eval('' + spareea[iifg].replace(/^0/g,''))); console.log('Jspare=' + jspare); ifactor*=60; } vttendsecs.push(jspare); ispare=-1; console.log('jspare=' + jspare); while ((timings[-1 + kkll].slice(ispare).substring(0,1) >= '0' && timings[-1 + kkll].slice(ispare).substring(0,1) <= '9') || timings[-1 + kkll].slice(ispare).substring(0,1) == '.' || timings[-1 + kkll].slice(ispare).substring(0,1) == ':') { spares=timings[-1 + kkll].slice(ispare).substring(0,1) + spares; ispare--; } console.log('spares=' + spares); sparesa=spares.split(':'); ifactor=1.0; jspare=0.0; for (iifg=eval(-1 + eval('' + sparesa.length)); iifg>=0; iifg--) { jspare+=eval(ifactor * eval('' + sparesa[iifg].replace(/^0/g,''))); ifactor*=60; } vttstartsecs.push(jspare); } } } function gotback(iois) { if (iois != null) { //if (iois.src.indexOf('?placegeo=') != -1) { //alert(1); var aconto = (iois.contentWindow || iois.contentDocument); //alert(11); if (aconto != null) { //alert(111); if (aconto.document) { aconto = aconto.document; } //alert(1111); if (aconto.body != null) { vttcont=aconto.body.innerHTML.replace('<pre>','').replace('</pre>',''); pushit(); } } //} } } function tracks(iois) { } function showScroll() { if ((navigator.userAgent.match(/iPhone|iPod|iPad/i) || top.document.URL.indexOf('?audio=') != -1) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) { document.getElementById('next').onclick=function() { image_index=image_index; } document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all'); //alert(document.getElementById('next').href); if (document.URL.indexOf('justmusic=0') != -1) { document.getElementById('next').innerHTML+='<audio onloadedmetadata=tracks(this); id=myaudio title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" onclick=" document.getElementById(' + "'place'" + ').style.visibility=' + "'visible'" + '; parent.document.body.setAttribute(' + "'data-music','yes'" + ');" style=position:absolute;top:0px;left:0px; type=audio/mp3 controls loop><source type=audio/mp3 src=sound/all.mp3></source><track kind="subtitles" src="sound/all.vtt" srclang="en"></track></audio><iframe onload=gotback(this) src=sound/all.vtt style=display:none;></iframe>'; } else { document.getElementById('next').innerHTML+='<audio onloadedmetadata=tracks(this); id=myaudio onclick=" document.getElementById(' + "'place'" + ').style.visibility=' + "'visible'" + ';" style=position:absolute;top:50%;left:50%; type=audio/mp3 controls loop data-ideanogo=autostart><source type=audio/mp3 src=sound/all.mp3></source><track kind="subtitles" src="sound/all.vtt" srclang="en"></track></audio><iframe onload=gotback(this) src=sound/all.vtt style=display:none;></iframe>'; } //alert(document.getElementById('next').innerHTML); console.log("1"); //var textTrackElem = document.getElementById("myaudio"); mycurt=0; setInterval(getct, 2000); setTimeout(setvv, 30000); } else { document.getElementById('place').style.visibility='visible'; } if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) { var oif=document.getElementById('iframeshowscrollxy'); if (oif == null) { if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) { document.body.innerHTML+="<iframe id='iframeshowscrollxy' style='display:none;' src='http://www.rjmprogramming.com.au/HTMLCSS/scroll_check.html'></iframe>"; } } } }

---

Previous relevant Ffmpeg Log Helper Towards VTT File Primer Tutorial is shown below.

Yesterday's One Image Website iOS Radio Music One Less Tutorial set us on an "off to the side, but eventually forward" project that intertwines ...

• ffmpeg ... with its great logging and media concatenation talents, thanks ...
• macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
• Audio and Video HTML element track cue functionality VTT file interface ... you can read more about at HTML5 Track Element Primer Tutorial

Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?

But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!

There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"_ing and "ls"_ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!

And so we have an albeit defaults very particular to my situation in its HTML form textarea and input type=text textbox defaults (shown via placeholder attributes), but we think it could be a tweakable basis for your own ffmpeg media concatenation work, perhaps, with our first draft proof of concept ffmpeg logging, via Terminal, PHP helper towards VTT file creation.

If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (reveal_ing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...


<form id=myform onsubmit=" var ins=document.getElementsByTagName('textarea'); if (document.getElementById(ins[0].id).value == '') { document.getElementById(ins[0].id).value=('' + document.getElementById(ins[0].id).placeholder); } ins=document.getElementsByTagName('input'); for (var ii=0; ii<ins.length; ii++) { if (document.getElementById(ins[ii].id).value == '' && document.getElementById(ins[ii].id).type == 'text') { document.getElementById(ins[ii].id).value=('' + document.getElementById(ins[ii].id).placeholder); } } return true;" action=./ffmpeg_log_to_vtt.php method=POST>
<textarea name=infile id=infile title='Or paste in your ffmpeg log file data' placeholder='all_bar_thecommute.txt' value='' style="background-color:yellow;"></textarea><br><br>
<table border=2 cellpadding=10 cellspacing=10>
<tr><th>Output Basename Prefixing Delimiter</th><th>Output Basename Suffixing Delimiter</th></tr>
<tr><td><input name=inbasenameprefix id=inbasenameprefix type=text placeholder='user@Users-Air' value=''></input></td><td><input name=inbasenamesuffix id=inbasenamesuffix type=text placeholder='% cd' value=''></input></td></tr>
</table>
<table border=2 cellpadding=10 cellspacing=10>
<tr><th>Metadata Prefixing String</th><th>Metadata Name Value Delimiter</th><th>Metadata Title Value Case Insensitive Start String</th></tr>
<tr><td><input name=metaprefix id=metaprefix type=text placeholder='Metadata:' value=''></input></td><td><input name=metadelimiter id=metadelimiter type=text placeholder=':' value=''></input></td><td><input name=metatitleprefix id=metatitleprefix type=text placeholder='tit' value=''></input></td></tr>
</table>
<table border=2 cellpadding=10 cellspacing=10>
<tr><th>Duration Prefixing String</th><th>Duration Time Part Delimiter</th></tr>
<tr><td><input name=durationprefix id=durationprefix type=text placeholder='Duration:' value=''></input></td><td><input name=durationdelimiter id=durationdelimiter type=text placeholder=':' value=''></input></td></tr>
</table>
<br><br><br>
<input id=mysub type=submit value="Create VTTs" style="background-color:lightgreen;"></input>
</form>


... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...

---

Previous relevant One Image Website iOS Radio Music One Less Tutorial is shown below.

Yesterday's One Image Website iOS Radio Music Tutorial "Stop Press" promised ...

For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.

... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...

No new window created ...	New window created ...
window.open([URL],'_self')	window.open([URL],'_blank')
location.href=[URL]	window.open([URL],'_top')
window.location=[URL]	top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'	form target=_blank action=[URL]
form target=_self action=[URL]	form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]	form target=_parent action=[URL] // if in an iframe
iframe src=[URL]	parent.window.location=[URL]; // if in an iframe

... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...


function rotateImage(place) {

while (number_of_image == 0)
{
place = place;
}
xplace=place;

anotherNew();

var foreground=document.getElementById(place);


var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");


if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}

function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}

</script>
</head>
<body id="body" onload=' xonl(); if (document.URL.indexOf("exif=") != -1) { dexifit(); } showScroll(); window.setTimeout("FadeInImage()", 4000); '>
<div id="thediv" style="display:block;" >
<span><a id="thedivlink" style="display:inline-block;" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." onclick="javascript: window.open('index-ssmhalf.html?justmusic=','The Commute - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" href="#" data-href="sound/Prelude_Melody-Mike_Vekris.mp3" >The Commute - RJM Programming ... you might see this while loading ... &#127926; click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery &#127926; ... else please wait for full functionality ...</a> versus <a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;>Exif Run</a></span>
</div>
<a id="alink" style="font-size:28px;background-color:yellow;" onclick="javascript: window.open('index-ssmhalf.html','The Commute - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)'); disableHref();" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" href="sound/Prelude_Melody-Mike_Vekris.mp3" >
<!--img border=0 id="place" style="width: 2816px; height: 2120px;" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming" src="siteimage.jpg" /-->
<img border=0 id="place" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." src="siteimage.jpg" />
</a>


... now, with the iOS platforms, presenting a new HTML audio (loop attribute set) in a slightly different incarnation as per index-ssmhalf.html ...



function nextPage()
{
if (navigator.userAgent.match(/iPhone|iPod|iPad/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {
image_index=image_index;
} else {
window.location = "index-saf.html";
}
}

function setvv() {
document.getElementById('place').style.visibility='visible';
}

function showScroll() {
if (navigator.userAgent.match(/iPhone|iPod|iPad/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) {
document.getElementById('next').onclick=function() { image_index=image_index; }
document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all');
//alert(document.getElementById('next').href);
if (document.URL.indexOf('justmusic=0') != -1) {
document.getElementById('next').innerHTML+='<audio title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" onclick=" document.getElementById(' + "'place'" + ').style.visibility=' + "'visible'" + '; parent.document.body.setAttribute(' + "'data-music','yes'" + ');" style=position:absolute;top:0px;left:0px; type=audio/mp3 controls loop><source type=audio/mp3 src=sound/all.mp3></source></audio>';
} else {
document.getElementById('next').innerHTML+='<audio onclick=" document.getElementById(' + "'place'" + ').style.visibility=' + "'visible'" + ';" style=position:absolute;top:50%;left:50%; type=audio/mp3 controls loop><source type=audio/mp3 src=sound/all.mp3></source></audio>';
}
//alert(document.getElementById('next').innerHTML);
setTimeout(setvv, 30000);
} else {
document.getElementById('place').style.visibility='visible';
}
if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) {
var oif=document.getElementById('iframeshowscrollxy');
if (oif == null) {
if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) {
document.body.innerHTML+="<iframe id='iframeshowscrollxy' style='display:none;' src='http://www.rjmprogramming.com.au/HTMLCSS/scroll_check.html'></iframe>";
}
}
}
}

</script>
</head>
<body id="body" onload='showScroll(); window.setTimeout("rotateImage()", 4000); '>
<a id="next" onclick="javascript: window.open('index-safhalf.html','The Commute - Playing With Filters (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');" title="" href="sound/Playing_with_Filters-Mike_Vekris.mp3" >
<!--img border=0 id="place" style="width: 2816px; height: 2120px;" alt="DSCF1486" src="DSCF1486.jpg" /-->
<img border=0 id="place" alt="" src="DSCF1486.jpg" style=visibility:hidden; />
</a>


... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...

• clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
• clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
• clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible

So feel free to try a One Image Website in the list below ...

• "Ephemeral"
• "Street Art"
• "The Commute"
• "The Inner 'Burbs"
• "Bygone"
• "West"
• "Walking Trip"

... where this new iOS music arrangement logic has been incorporated.

Stop Press

The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.

---

Previous relevant One Image Website iOS Radio Music Tutorial is shown below.

Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...


"The Commute"


... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.

The ingredients for the solution, and testing thereof, are ...

• macOS command line ffmpeg ... capable of ...
• concatenating audio files ... with command like ...
  

 
ffmpeg -i oneoffive.mp3 -i twooffive.mp3 -i threeoffive.mp3 -i fouroffive.mp3 -i fiveoffive.mp3 -filter_complex "[0:a][1:a]concat=n=5:v=0:a=1" all.mp3

 

  ... into ...
• compilation audio ... all.mp3 ... uploaded to RJM Programming domain ... is now called on ...
• within an audio tagged HTML element ... with ...
• loop attribute set ... using as a device ...
• an iPhone ... teamed ...
• optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
• the default speakers for sound ... then use ...
• web browser app such as Safari ...
• into the address bar type

  
https://www.rjmprogramming.com.au/thecommute


  ... to arrive at the calling window ...

• click the blue link up the top that appears for a short time ... then ...
• in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
• if more interesting visuals are also required focus back to calling window

And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!

Code changes, all just clientside HTML and Javascript, went ...

calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() { if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) { document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href'); } else { document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic='; document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; }; document.getElementById('thedivlink').target='_blank'; } } </script> </head> <body id="body" onload=' xonl(); if (document.URL.indexOf("exif=") != -1) { dexifit(); } showScroll(); window.setTimeout("FadeInImage()", 4000); '> <div id="thediv" style="display:block;" > <span><a id="thedivlink" style="display:inline-block;" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." onclick="javascript: window.open('index-ssmhalf.html?justmusic=','The Commute - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" href="#" data-href="sound/Prelude_Melody-Mike_Vekris.mp3" >The Commute - RJM Programming ... you might see this while loading ... &#127926; click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery &#127926; ... else please wait for full functionality ...</a> versus <a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;>Exif Run</a></span> </div> <a id="alink" style="font-size:28px;background-color:yellow;" onclick="javascript: window.open('index-ssmhalf.html','The Commute - Soul Tracker Mechanism (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)'); disableHref();" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" href="sound/Prelude_Melody-Mike_Vekris.mp3" > <!--img border=0 id="place" style="width: 2816px; height: 2120px;" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming" src="siteimage.jpg" /--> <img border=0 id="place" title="Click for Prelude Melody provided by http://www.freesoundtrackmusic.com" alt="The Commute - RJM Programming ... you might see this while loading ... click here now to just play music (Prelude Melody provided by http://www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ..." src="siteimage.jpg" /> </a>
music window's index-ssmhalf.html changes around the document.body onload event area of interest ...
function nextPage() { if (navigator.userAgent.match(/iPhone|iPod|iPad/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) { image_index=image_index; } else { window.location = "index-saf.html"; } } function setvv() { document.getElementById('place').style.visibility='visible'; } function showScroll() { if (navigator.userAgent.match(/iPhone|iPod|iPad/i) && ('' + document.referer).indexOf('index-') == -1 && document.URL.indexOf('justmusic') != -1) { document.getElementById('next').onclick=function() { image_index=image_index; } document.getElementById('next').href='#' + document.getElementById('next').href.replace('Playing_with_Filters-Mike_Vekris', 'all'); //alert(document.getElementById('next').href); document.getElementById('next').innerHTML+='<audio onclick=" document.getElementById(' + "'place'" + ').style.visibility=' + "'visible'" + ';" style=position:absolute;top:50%;left:50%; type=audio/mp3 controls loop><source type=audio/mp3 src=sound/all.mp3></source></audio>'; //alert(document.getElementById('next').innerHTML); setTimeout(setvv, 30000); } else { document.getElementById('place').style.visibility='visible'; } if (document.URL.indexOf('yesscroll' + 'check=') != -1 || document.head.innerHTML.indexOf('yesscr' + 'ollcheck=') != -1) { var oif=document.getElementById('iframeshowscrollxy'); if (oif == null) { if (document.URL.indexOf('noscroll' + 'check=') == -1 && document.head.innerHTML.indexOf('noscr' + 'ollcheck=') == -1) { document.body.innerHTML+="<iframe id='iframeshowscrollxy' style='display:none;' src='http://www.rjmprogramming.com.au/HTMLCSS/scroll_check.html'></iframe>"; } } } } </script> </head> <body id="body" onload='showScroll(); window.setTimeout("rotateImage()", 4000); '> <a id="next" onclick="javascript: window.open('index-safhalf.html','The Commute - Playing With Filters (via http://www.freesoundtrackmusic.com) - RJM Programming - http://www.rjmprogramming.com.au (Copyright © 2011 rjmprogramming.com.au all rights reserved.)');" title="" href="sound/Playing_with_Filters-Mike_Vekris.mp3" > <!--img border=0 id="place" style="width: 2816px; height: 2120px;" alt="DSCF1486" src="DSCF1486.jpg" /--> <img border=0 id="place" alt="" src="DSCF1486.jpg" style=visibility:hidden; /> </a>

... and off up to the RJM Programming domain as "The Commute", with music courtesy of the generous Royalty Free Music For Video, thanks.

Stop Press

For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.

---

Previous relevant Responsive Web Design Landing Page Image Map Tutorial is shown below.

The recent Responsive Web Design Landing Page Incarnation Tutorial said ...

So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!

We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...

• our Image Map's image will have a variable set of width x height dimensions ...
• our Image Map's image will be transparent
• our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working

... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!

Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...

• position:absolute; (our usual for overlay scenarios)
• z-index:56; (for both transparent image and its associated Image Map ... more on this later)
• left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
• top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
• width (which will be up to the transparent image width)
• height (which will be up to the transparent image height)

... and no concern about opacity given the transparent image and z-index considerations, here.

So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...

<?php echo "

<div id=divimif></div>
<iframe style='display:none;' id=myimif src=></iframe>

"; ?>

... placed at the bottom of the Landing Page body element, and used in the changed document.body onload event Javascript function ...

<?php echo "

function onl() {
if (eval('' + screen.width) <= 420) {
//alert(screen.width);
document.getElementById('topspan').innerHTML=document.getElementById('topspan').innerHTML.replace('RJM Programming', 'RJM</h1><h1>Programming').replace(/\<\/hJUNK1/g, '</h2');
} //else if (eval('' + screen.width) <= 480) {
//alert('0' + screen.width);
//}
var myiz=document.getElementById('ifzero').getBoundingClientRect();
var myhr=document.getElementById('myheader').getBoundingClientRect();
var myh=eval('' + myhr.height);
var myt=eval('' + myhr.top);
var widthleft=eval(eval('' + myiz.left) - eval('' + myhr.left));
var widthmiddle=eval('' + myiz.width);
var widthright=eval(eval('' + myhr.width) - eval('' + myiz.width) - eval('' + myiz.left));
if (document.getElementById('navTop')) {
var myalthr=document.getElementById('navTop').getBoundingClientRect();
myh-=eval('' + myalthr.height);
myt=eval('' + myalthr.height);
}
var heighttop=eval(eval('' + myiz.top) - eval('' + myt));
var heightmiddle=eval('' + myiz.height);
var heightbottom=eval(eval('' + myh) - eval('' + myiz.height)); // - eval('' + myiz.top));
if (window.parent != window) {
myh=myh;
} else if (('' + window.opener).replace(/^undefined/g,'').replace(/^null/g,'')) {
myh=myh;
} else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPaJUNKd|iPod|Opera Mini|IEMobile/i)) {
myh=myh;
} else {
document.getElementById('myimif').src=document.URL.split('?')[0].split('#')[0] + '?left=' + myhr.left + '&top=' + myt + '&width=' + myhr.width + '&height=' + myh + '&ifleft=' + myiz.left + '&iftop=' + myiz.top + '&ifwidth=' + myiz.width + '&ifheight=' + myiz.height + '&widthleft=' + widthleft + '&widthmiddle=' + widthmiddle + '&widthright=' + widthright + '&heighttop=' + heighttop + '&heightmiddle=' + heightmiddle + '&heightbottom=' + heightbottom;
setTimeout(imbit, 5000);
}
}

"; ?>

... to call on that new PHP ...

<?php

if (isset($_GET['left']) && isset($_GET['top']) && isset($_GET['width']) && isset($_GET['height'])) {
$uw="";
$postuw="";
$uw1="";
$postuw1="";
$uw2="";
$postuw2="";
$uw3="";
$postuw3="";
if (isset($_GET['widthleft']) && isset($_GET['widthmiddle']) && isset($_GET['widthright']) && isset($_GET['heighttop']) && isset($_GET['heightmiddle']) && isset($_GET['heightbottom'])) {
$uw=" usemap=#workmap";
$uw1=" usemap=#workmap1";
$uw2=" usemap=#workmap2";
$uw3=" usemap=#workmap3";

$postuw="<map name=workmap style=z-index:56;>";
$postuw1="<map name=workmap1 style=z-index:56;>";
$postuw2="<map name=workmap2 style=z-index:56;>";
$postuw3="<map name=workmap3 style=z-index:56;>";

$postuw.="<area shape=rect title=Ephemeral onmouseover=omoiset(1); onmouseout=omoiset(-2); coords=0,0," . explode('.',$_GET['widthleft'])[0] . "," . explode('.',$_GET['heighttop'])[0] . " alt=LeftTop onclick=ouralert(1); target=_blank href=//www.rjmprogramming.com.au/ephemeral />";
$postuw.="<area shape=rect title=StreetArt onmouseover=omoiset(2); onmouseout=omoiset(-2); coords=" . explode('.',$_GET['widthleft'])[0] . ",0," . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . "," . explode('.',$_GET['heighttop'])[0] . " alt=CenterTop onclick=ouralert(2); target=_blank href=//www.rjmprogramming.com.au/streetart />";
$postuw.="<area shape=rect title=TheCommute onmouseover=omoiset(3); onmouseout=omoiset(-2); coords=" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . ",0," . explode('.',$_GET['width'])[0] . "," . explode('.',$_GET['heighttop'])[0] . " alt=RightTop onclick=ouralert(3); target=_blank href=//www.rjmprogramming.com.au/thecommute />";

$postuw1.="<area id=area4 title=? onmouseover=omoiset(4); onmouseout=omoiset(-1); shape=rect coords=0,0," . explode('.',$_GET['widthleft'])[0] . "," . explode('.',(0 + $_GET['heightmiddle']))[0] . " alt=LeftMiddle onclick=ouralert(4); target=_blank nohref />";
$postuw2.="<area id=area6 title=? onmouseover=omoiset(6); onmouseout=omoiset(-1); shape=rect coords=0,0," . explode('.',$_GET['widthright'])[0] . "," . explode('.',(0 + $_GET['heightmiddle']))[0] . " alt=RightMiddle onclick=ouralert(6); target=_blank nohref />";

$postuw3.="<area shape=rect title=InnerBurbs onmouseover=omoiset(7); onmouseout=omoiset(-2); coords=0,0," . explode('.',$_GET['widthleft'])[0] . "," . explode('.',$_GET['heightbottom'])[0] . " alt=LeftBottom onclick=ouralert(7); target=_blank href=//www.rjmprogramming.com.au/pyrmontultimo />";
$postuw3.="<area shape=rect title=Bygone onmouseover=omoiset(8); onmouseout=omoiset(-2); coords=" . explode('.',$_GET['widthleft'])[0] . ",0," . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . "," . explode('.',$_GET['heightbottom'])[0] . " alt=CenterBottom onclick=ouralert(8); target=_blank href=//www.rjmprogramming.com.au/bygone />";
$postuw3.="<area shape=rect title=West onmouseover=omoiset(9); onmouseout=omoiset(-2); coords=" . explode('.',($_GET['widthleft'] + $_GET['widthmiddle']))[0] . ",0," . explode('.',$_GET['width'])[0] . "," . explode('.',$_GET['heightbottom'])[0] . " alt=RightBottom onclick=ouralert(9); target=_blank href=//www.rjmprogramming.com.au/thewest />";

$postuw.="</map>";
$postuw1.="</map>";
$postuw2.="</map>";
$postuw3.="</map>";
}


// Create a transparent image thanks to https://www.php.net/manual/en/function.imagecolortransparent.php
$im = imagecreatetruecolor($_GET['width'], $_GET['height']);
$red = imagecolorallocate($im, 255, 0, 0);
$black = imagecolorallocate($im, 0, 0, 0);

// Make the background transparent
imagecolortransparent($im, $black);

// Save the image
$udirnameprebimg='/tmp/imagecolortransparent.png';
imagepng($im, $udirnameprebimg);
$duis='data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$udirnameprebimg)[-1 + sizeof(explode('.',$udirnameprebimg))])) . ';base64,' . base64_encode(file_get_contents($udirnameprebimg));
imagedestroy($im);
unlink($udirnameprebimg);


echo "<html>
<body onload=\"parent.document.getElementById('divimif').innerHTML='<img id=myimg style=height:" . $_GET['heighttop'] . "px;z-index:56;position:absolute;top:" . $_GET['top'] . "px;left:" . $_GET['left'] . "px;width:" . $_GET['width'] . "px; src=" . $duis . "" . $uw . "></img>" . $postuw . "<img id=myimg1 style=height:" . $_GET['heightmiddle'] . "px;z-index:56;position:absolute;top:" . explode('.',($_GET['top'] + $_GET['heighttop']))[0] . "px;left:" . $_GET['left'] . "px;width:" . $_GET['widthleft'] . "px; src=" . $duis . "" . $uw1 . "<>/img>" . $postuw1 . "<img id=myimg2 style=height:" . $_GET['heightmiddle'] . "px;z-index:56;position:absolute;top:" . explode('.',($_GET['top'] + $_GET['heighttop']))[0] . "px;left:" . explode('.',($_GET['width'] - $_GET['widthright']))[0] . "px;width:" . $_GET['widthright'] . "px; src=" . $duis . "" . $uw2 . "></img>" . $postuw2 . "<img id=myimg3 style=height:" . explode('.',($_GET['height'] - $_GET['heighttop'] - $_GET['heightmiddle']))[0] . "px;z-index:56;position:absolute;top:" . explode('.',($_GET['top'] + $_GET['heighttop'] + $_GET['heightmiddle']))[0] . "px;left:" . $_GET['left'] . "px;width:" . $_GET['width'] . "px; src=" . $duis . "" . $uw3 . "></img>" . $postuw3 . "'; \"></body>
</html>";
exit;
}

?>

... and once setup, helped out by new Javascript, as per ...

<?php echo "

var urls=['', '', '', ' ', '', ' ', '', '', ''];
var omoi=-1;
var isrelp=false;

function postomoiset() {
if (isrelp) {
isrelp=false;
if (omoi == 4 || omoi == 6) {
var wasomoi=omoi;
omoi=-1;
ouralert(wasomoi);
}
}
}

function omoiset(jnnum) {
if (eval('' + jnnum) == -1) {
omoi=jnnum;
//document.title='omoi=' + omoi;
isrelp=false;
//setTimeout(postomoiset, 8000);
} else if (eval('' + jnnum) == -2) {
if (omoi != 4 && omoi != 6) {
omoi=jnnum;
//document.title='omoi=' + omoi;
isrelp=false;
//setTimeout(postomoiset, 8000);
}
} else {
omoi=jnnum;
//document.title='omoi=' + omoi;
if (omoi != 4 && omoi != 6) {
isrelp=false;
} else {
isrelp=true;
//document.title='omoi=' + omoi + '|';
setTimeout(postomoiset, 8000);
}
}
}

function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}


function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}

"; ?>

... in a changed index.php Landing Page whose guises as ...

• Landing Page in mobile phone devices
• Landing Page in an iframe
• Landing Page in a popup window

... we all excluded from new functionality Image Map potential "dark green area clicking" access to photography themed "One Image Websites" ...

• "Ephemeral"
• "Street Art"
• "The Commute"
• "The Inner 'Burbs"
• "Bygone"
• "West"

... accessible from Image Map area elements up above and down below the WordPress Blog posting iframe whose CSS property z-index is set to ...

<?php echo "

<iframe title='Recent posts' onload='check_if(this);' src='PHP/zero.html?totalwidth=y' class='zero' id='ifzero' style='z-index:57;'></iframe>

"; ?>

... 57.

---

Previous relevant Responsive Web Design Landing Page Incarnation Tutorial is shown below.

Along the same "Responsive Design" themes of Responsive Web Design Primer Tutorial, we stumbled upon the excellent W3Schools Responsive Design Based Start Page Idea which inspired us to retry RJM Programming Landing Page thoughts ...

• separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
• any other call of any complexity or having a query string etcetera, reverting to the "old way"

... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!

You'll see, though, using the new index.php Responsive Design Landing Page incarnation ...

... how the clutter melts away like a hot knife through margarinebutter!

---

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Today we wanted to tip our toes into the vast subject of "responsive web design" ...

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]

... coming at it from the idea "Can a responsive shell webpage host a non-responsive iframe?"

In turn this got us to the excellent ideas of this webpage which we'll try out for a while ...

• honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
• honing in on iPhone sized devices (ie. not iPads nor laptops) ...
• host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.html responsively web designed shell supervisory webpage and start using some of that ...
  

  Unresponsive Landing Page
  Responsive Shell around Unresponsive Landing Page

  ... as food for (your) thought ...

  
function bodonl() {
var wasih=document.body.innerHTML;
var huhd=document.getElementById('Container').getBoundingClientRect();
var pb=0;
if (eval('' + huhd.height) > eval('' + huhd.width)) {
isportrait=true;
pb=eval(eval('' + huhd.width) / eval('' + huhd.height) * 100.0);
nowih='<div id="Container" style="padding-right:' + pb + '%; position:relative; display:block; height: 100vh;"><iframe' + wasih.split('<iframe')[1].split('</div>')[0].replace('" frameborder', fname + '" style="position:absolute; top:0; left: 0;" frameborder') + '</div>';
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//document.getElementById('myvis').setAttribute('initial-scale','0.5');
//}
} else {
isportrait=false;
pb=eval(eval('' + huhd.height) / eval('' + huhd.width) * 100.0);
nowih='<div id="Container" style="padding-bottom:' + pb + '%; position:relative; display:block; width: 100%;"><iframe' + wasih.split('<iframe')[1].split('</div>')[0].replace('" frameborder', fname + '" style="position:absolute; top:0; left: 0;" frameborder') + '</div>';
}
document.body.innerHTML=nowih;
}


  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.

  ---

  If this was interesting you may be interested in this too.