Robert James Metcalfe Blog

Walking Trip …

Posted on February 23, 2013 by admin

Walking Trip

📅

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

Posted in Photography, Trips | Tagged one image website, photography, trips | 34 Comments

Preview Image Map PDF to Image Basis Preparation Tutorial

Posted on June 25, 2026 by admin

Preview Image Map PDF to Image Basis Preparation Tutorial

Around here, using a MacBook Air under macOS, we have, as far as Image Editors going, predominantly …

PaintBrush (for macOS) doing the bulk of the work …
Gimp for specialized tasks … and …
Preview (we last talked about with Preview Speech Bubble Overlay YouTube API Caller Making of Tutorial) generally takes over interfacing between PDF and image(s)

… and it is “par for the course” today, here, describing a Preview talent turning a PDF containing a sequence of image and annotation data into a single zoomable (to reach everything) single image output, that can form the basis for an Image Map. This technique we’re describing for this was used to create …

… as the example image we started with on our latest Image Map foray we started with Inhouse Image Map Creator Tutorial.

Here are the steps we used to create this image, using macOS Preview …

downloaded PDF to MacBook Air hard disk via email attachment functionalities …
opened downloaded PDF via right click Open With -> Preview
View -> Contact Sheet
Click Scale Document Down (ie. Zoom Out) however many times as needed to see all the images fit within the screen view
control-command-shift-3
open PaintBrush (for macOS)
File -> New from Clipboard
clip out any unnecessary bits (perhaps via a new rectangular selection and repeat the process)
File -> Save As…
upload to RJM Programming website

Enjoy!

Did You Know?

Are you facing the scenario where you have images of interest in a PDF but there are large parts of the content not images and not annotation (ie. not exactly like above)? Well, if you use an Apache/PHP local web server like MAMP you could read PDF to Images on AlmaLinux Primer Tutorial regarding getting some inhouse solutions going here.

Previous relevant Preview Speech Bubble Overlay YouTube API Caller Making of Tutorial is shown below.

Preview Speech Bubble Overlay YouTube API Caller Making of Tutorial

Today we’re “making up” another angle to yesterday’s Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial.

You’ll have noticed a lot of Speech Bubbles appearing in the image data of presentations lately.

We make this happen via …

do initial work without Speech Bubbles on macOS PaintBrush … ending with a PNG file …
open that PNG file in macOS Preview … and …
add in Speech Bubbles … with default gray background colour (we used macOS Digital Colour Meter to work out is rgb(230,230,230) … which ends up being significant?!) …
Save … to same PNG file, clobbering (so, bear that in mind?!)
our behind the scenes command line PHP makes a JPEG and JPG copy later

Now, today’s optional alternative approach we’re making ^up a case for, today, says …

Go forth, ImageMagick!
Show us your stuff!
Before getting thee to a nunnery … hop (or walk, it’s up to you) over yonder, and extract … yes, extract … aforesaidmentioned Speech Bubbles into a separate image where the rest of the image pixels become transparent.

… ahead of another “overlay” idea whereby a …

base image (with no Speech Bubbles, like after step 1, only, above) … the same size as …
an overlay image (ideally just with Speech Bubbles and the rest transparent (but a backup plan, more clunky, is to overlay with image from steps 4 or 5 above)) derived from PNG (like after step 4 above) or JPG or JPEG (like after step 5 above)

… contribute to make a new presentation image feature (perhaps with animation) as an embellishment.

Believe it or not, it all worked for us with a version of ImageMagick here on our local macOS MAMP Apache/PHP/MySql local web server environment, but the PHP shell_exec run command, derived from …

<?php
// Thanks to https://github.com/ImageMagick/ImageMagick/discussions/4606 and https://stackoverflow.com/questions/71094480/how-to-execute-multi-line-command-with-shell-exec $cmd = <<<CMD /bin/convert luna_backagain-1.jpeg -alpha off \ $ -clone 0 -color-threshold "srgb(0,0,0)-srgb(0,0,0)" $ \ $ -clone 0 -color-threshold "srgb(220,220,220)-srgb(235,235,235)" $ \ $ -clone 1,2 -compose plus -composite $ \ -delete 1,2 \ -alpha off -quality 2400 -colorspace RGB -compose copy_opacity -composite \ luna_backagain.png CMD;
?>

… did not work …

convert: unrecognized option `-color-threshold’ @ error/convert.c/ConvertImageCommand/1171.

… with the ImageMagick version up at the RJM Programming domain (a newer one, we suspect). So sad.

Anyway, we inform the user and apply the “a bit beside the point” fallback scenario should this be the case, within the “blurbs” of a “proof of concept” PHP web application we wrote called speech_bubble_overlays.php you can try for yourself or, perhaps, download and start working with on a local web server you have setup?! Given the nunnery is out … and all, like.

Previous relevant Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial is shown below.

Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial

Regarding yesterday’s YouTube API Caller Subsequent Post Winding Up For Now Tutorial …

Yes, now clicks on it’s “conjoin” links cause a contextually helping and relevant thumbnail image to appear adjacent to that relevant “a” element, and now navigates to the bigger image and comes back to show that thumbnail, whereas, earlier yesterday, the webpage just navigated down to the big image, as updated, only.

Now, we could have coded within the individual relevant blog posting for this new idea, but we got thinking that this arrangement we may use again, and that …

we could code header.php for a setTimeout() called new Javascript function to recognize and act on the scenario above … but then we preferred …
coding header.php to call a new external Javascript we’ve written for this, and that way, perhaps, be useful for scenarios outside the scope of this WordPress blog

All a bit of overkill?! Well, perhaps, but the learning is in the doing, and it is modularization at play, which can’t be a totally negative thing, in our view. Besides that, we like to learn CSS better by trying to make what we want to happen, happen, regarding webpage usage. These “Making of” scenarios can be like “accelerated learning” for us, because there is a concrete aim with the work, and can be achieved in a short time.

To get to this new external Javascript we wrote this new “proof of concept” web application you can try for yourself below …

… proving the logic in isolation. Please do not think getting this represents the end of testing, because this new external Javascript a_to_details_re_img.js tool out of this, needs to work within environments with many and varied “a” link data arrangements, and separate testing needs to be done in this phase with the Javascript as your more generic tool.

Previous relevant YouTube API Caller Subsequent Post Winding Up For Now Tutorial is shown below.

YouTube API Caller Subsequent Post Winding Up For Now Tutorial

Today, we’re conjoining … yes, conjoining … two inhouse blog posting threads, those being …

the recent YouTube API Caller Post Winding Up For Now Tutorial conjoined … yes, conjoined … to …
YouTube Video List of Play Supervisor Tutorial from January earlier this year

We think the former is a more savvy approach to YouTube API video “Radio Play” rather than the latter because the latter just works with crude setTimeout() delays based on the video being played straight through with no backtracking or non-video-play delays … and not continuous regarding mobile platforms.

However, we think the latter has it’s “action packed” merits regarding it’s details/summary reveal elements that add a bit of razzamatazz, and so we are conjoining … yes, conjoining … two inhouse blog posting thread web applications regarding …

abilities to call each other off emoji button clicks …
abilities to save to each other’s “Save” functionalities so that a potential “Recall” of a playlist becomes available to each of the web applications, separately, in that web application’s modus operandi regarding YouTube API video “Radio Play”

That should leave you free to try, either …

the changed swipe_media.html Tabular Single Row Media Gallery web application … and/or …
the changed esp_ornot_esp.html Reveal Style YouTube Video “Radio Play” web application

… as different takes on our inhouse ways regarding YouTube API video “Radio Play”, which we hope you enjoy!

Luna

Previous relevant YouTube API Caller Post Winding Up For Now Tutorial is shown below.

YouTube API Caller Post Winding Up For Now Tutorial

You knew we were “winding ^you up” when we presented YouTube API Caller Winding Up For Now Tutorial, didn’t you?! It can’t be the total end of the story, right?!

Yes, we found both …

issues … and …
improvements to make

… regarding that “compilation mode” 📻 “emoji button” double click within bottom buttons mode of YouTube video Radio Play modus operandi. Clearly, Luna …

Luna

… knew the jig was up!

Under “issues” we’d say it boiled down to URLs capable of going past the error 414 length limits. And what of “improvements to make”? Well, the most interesting one, for us, was to …

if (!independent) { prefix='isradio=YES&completionmatters=y' + argshuffle + '&'; if (eval('' + dsa.length) > 1 && eval('' + wsa.length) > 1) { var anarr=ytlist.split(','); anarr.sort(); ytlist='' + anarr[0]; for (var inb=1; inb<anarr.length; inb++) { ytlist+=',' + anarr[inb]; } } }

… aid with the randomization of YouTube video songs (in amongst the three categorizations we’ve got going out of Disco and The Wrecking Crew and Yacht Rock) …

collected as three separate “lump components” to the YouTube video list (before this new sorting idea) … but, of course …
sorting via YouTube video ID brings back the randomness to the order … and fits in with …
the default “shuffle on” setting for this “compilation play” Radio Play

… thinking.

And so, feel ever so free to try the changed swipe_media.html Tabular Single Row Media Gallery web application.

Previous relevant YouTube API Caller Winding Up For Now Tutorial is shown below.

YouTube API Caller Winding Up For Now Tutorial

We’re calling it quits after today regarding the YouTube media aspects to the Media Gallery web application yesterday’s YouTube API Caller Order and Completion Tutorial.

We’ll be back, because we always find things, and come across, via others mostly (thanks), new ways to do things, but what are the things achieved for the first^ish time, for us, in this project? We think …

Radio Play (better than a previous incarnation) of YouTube videos on mobile or non-mobile (and for the first time we can remember there were days when mobile was out ahead of non-mobile for it all working, curiously)
Bluetooth has “hidden powers” … sorry to be this vague, but you need to test this YouTube API logics going into and out of Bluetooth
continuous YouTube media play, this way, at the end of the day, needs your website to not be struggling, the logic dependent on setTimeout logics (which have to be continually called) … ie. you need to maintain “connection”
how good is Lorem Picsum, thanks, regarding being a great free image repository … old news but good news

And so, today, we fixed up an issue that appeared to us using the macOS Opera browser. The bottom buttons were missing, and the fix will surprise some. Not fancy pants thinking …

var isOpera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false); var agentruew=eval('' + document.documentElement.clientWidth); var agentrueh=eval('' + document.documentElement.clientHeight); var amax=Math.max(agentruew,agentrueh); var amin=Math.min(agentruew,agentrueh); amin-=60; //if (isOpera) { // amin-=80; //}

… just “dumbing it down” if you will. Trying a simple fix, like …

removing two of the left hand cell | characters fixed the issue (highlighting the CSS subtleties of visibility:hidden; (still retaining the whitespace) versus display:none; (no retension of whitespace) approaches to hiding elements, in our case the “breadcrumb navigation” first approach we’re leaving in, in case we return to the idea under a visibility:hidden; paradigm)
and while we were there removed the grating underlining of these

Doh!

And so, feel free to try the mildly tweaked swipe_media.html Tabular Single Row Media Gallery web application.

Did you know?

Yes, overthinking things can be detrimental. It is good to think complex issues through, away from any struggle you’ve been having for hours, when you only expected that issue to take a few minutes.

But … even above … we would not have arrived at the “| character removal” fix quickly, if we had not gone though the other “overthinking part tests” to ascertain what was possible, if you get my drift. How you spend development hours, and how efficient you are are variables, and will change from day to day. There might be days you are best not touching the keyboard (and ditch the mobile too).

Previous relevant YouTube API Caller Order and Completion Tutorial is shown below.

YouTube API Caller Order and Completion Tutorial

Up until yesterday’s YouTube API Caller Breadcrumb Navigation Tutorial a lot of the theme to …

YouTube video presentation tended towards “the random” … fun for programmers and gamers alike (actually pretty essential for a lot of the work of the latter) … but eventuality for human mental health, or for episodic video media data, you’ll want a way to introduce …
“order” … as designated by the user in an amended prompt window …

Enter YouTube 11 character code video (comma separated) or audio stream only of video (semicolon separated) list to Radio Play (and add ! to start in shuffle mode and/or # to honour the order you enter and/or & to ensure whole list passes through) … or a YouTube Search String basis to create a playlist via a Radio📻? button to activate, later.

… and/or …

talked about today and in

“completion” … as designated by the user in same prompt window … ie. hang around for whole list to be scanned for video durations, and passed on

And further to the work of the day before yesterday’s YouTube API Caller Replaced Video Entry Tutorial we wanted to extend that logic introduced there in two ways …

allow for a comma separated list of 11 character YouTube video IDs be accepted …
have entries be immediately processed should the entry (or comma separated entries) be made in the currently active YouTube playing video’s associated textbox … via …
var geleven=-1; function onoff() { var nnum=0; if (geleven >= 0) { backtolist=['c' + eval('' + geleven)]; document.getElementById('c' + geleven).checked=false; while (document.getElementById('i' + nnum)) { if (('' + nnum) != ('' + geleven)) { if (document.getElementById('c' + nnum).checked) { backtolist.push('c' + eval('' + nnum)); } document.getElementById('c' + nnum).checked=false; } nnum++; } //document.getElementById('c' + geleven).checked=true; geleven=-geleven; //checkval(document.getElementById('i' + Math.abs(geleven))); setTimeout(function(){ document.getElementById('c0').checked=false; document.getElementById('c' + Math.abs(geleven)).checked=true; }, 2400); setTimeout(function(){ for (var ik=0; ik<backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true; } backtolist=[]; }, 6500); } }

… into the mix in …

the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller … used by …
the changed swipe_media.html Tabular Single Row Media Gallery web application.

Previous relevant YouTube API Caller Breadcrumb Navigation Tutorial is shown below.

YouTube API Caller Breadcrumb Navigation Tutorial

Further to yesterday’s YouTube API Caller Replaced Video Entry Tutorial we wanted to offer the “Radio Play” users of our Tabular Single Row Media Gallery web application the chance to use Breadcrumb style navigation aids regarding …

<< … navigate to first YouTube video of interest in the playlist
< … navigate to previous YouTube video of interest in the playlist
> … navigate to next YouTube video of interest in the playlist
>> … navigate to last YouTube video of interest in the playlist

… referencing this onclick Javascript logic …

… along with the “^{single song obsessional} looping” logic of a couple of days ago made toggle^able (to better fit in with these new ideas, we felt), all in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer and establish a two day limit of availability regarding data URI public URL media links, enough time we figure for sharing and any collaboration (but will not translate well for any saved playlist arrangements involving any data URI user based entries and outside those two days, alas) in our changed PHP helper signature_signature.php …

<?php
if (isset($_POST['an_i_tidy']) || isset($_GET['an_i_tidy'])) { foreach (glob($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR . 'karaoke_i_bizzo_' . '*.*') as $dfilename) { $filemtime = filemtime($dfilename); if (time() - $filemtime >= 172800) { // 86400 seconds in a day unlink($dfilename); } } }
?>

… called by the modified stop_start_youtube.html YouTube API caller.

Previous relevant YouTube API Caller Replaced Video Entry Tutorial is shown below.

YouTube API Caller Replaced Video Entry Tutorial

In addition to the …

user entry URL … and now …
user entry data URI … optionally using local file browsing …

… playlist amending tools available to users within yesterday’s YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial today we’ve added the more obvious …

user entry of different YouTube 11 character video ID

… into the mix in …

the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller … used by …
the changed swipe_media.html Tabular Single Row Media Gallery web application.

Previous relevant YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial is shown below.

YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial

Further to yesterday’s YouTube API Caller Radio Play Obsession Looping Tutorial, and concerning …

phase two data URI user media interactive textbox entries …
we’d actually started down it’s road in our first pass of PHP work a couple of weeks ago … and we are really happy we “let that stew” because …
returning to the work today we developed a much easier concept than …
1. give the data URI a nickname shortening that data URI and bring it into play at the appropriate moment … versus today’s much better …
2. store the data as a media file on our server for a length of time (we haven’t organized yet)

That way a …

data URI is entered into a textbox by the user … and they can locally browse for this if they want …
the onblur event logic immediately calls the PHP to create the temporary web server media file (stored in a public URL place) … so …
into the textbox we map the public URL place media URL over the data URI

… and avoid any “too long URL” errors as well as not needing to map between any nicknames with real data URI data … much easier!

Why involve PHP? The amounts of data regarding data URIs precludes a feasible (ie. we’re not saying it’s impossible) clientside only approach. We need to create data files and the serverside is the best place we can think of to do that in …

our changed PHP helper signature_signature.php helping
the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller
the changed swipe_media.html Tabular Single Row Image Gallery web application.

Previous relevant YouTube API Caller Radio Play Obsession Looping Tutorial is shown below.

YouTube API Caller Radio Play Obsession Looping Tutorial

Yesterday’s YouTube API Caller Phase Two Console Warning Tutorial outlined why …

“^{single song obsessional} looping” … sits uneasily with …
“^{set of song videos} looping” … in Radio Play mode of use

… with our recent Tabular Single Row Image Gallery web application.

But they don’t have to be totally inalienable concepts, as we outlined …

where, now, if you are after some “^{single song obsessional} looping” try unchecking all checkboxes except the one of your obsession … and good luck ending the itch!

That remains true, but we wanted an easier way to allow for “^{single song obsessional} looping” in Radio Play modes of use. We wanted to hook into an unused event arrangement related to those textboxes to the right of the left hand side checkboxes. We decided on …

oncontextmenu … ie. right click … on non-mobile platforms … and …
ontouchmove … on mobile platforms

… via (at the grandchild level) …

for (var iipp=0; iipp<=29; iipp++) { if (('' + top.document.URL).indexOf('isradio=') != -1) { if (parent.document.getElementById('i' + iipp).outerHTML.indexOf(' oncontextmmenu=') == -1) { parent.document.getElementById('i' + iipp).oncontextmenu=function(event){ parent.obsessabout(event); }; parent.document.getElementById('i' + iipp).ontouchmove=function(event){ parent.obsessabout(event); }; if (istitles.indexOf(iipp) == -1) { istitles.push(iipp); } if (iipp == 0) { setTimeout(function(){ for (var jipp=0; jipp<istitles.length; jipp++) { if (('' + parent.document.getElementById('i' + jipp).title) == '') { parent.document.getElementById('i' + jipp).title+=' Right click or touch move to loop just this video'; } else { parent.document.getElementById('i' + jipp).title+=' and right click or touch move to loop just this video'; } } }, 8000); } } } // rest of for loop code }

… actioned (at the child/parent level) …

function obsessabout(evt) { evt.stopPropagation(); var theonetokeep=('' + evt.target.id).replace('i',''); var nnum=0; document.getElementById('c' + theonetokeep).checked=true; while (document.getElementById('i' + nnum)) { if (('' + nnum) != ('' + theonetokeep)) { document.getElementById('c' + nnum).checked=false; } nnum++; } }

… in …

the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller

… especially related to the grandparent level Tabular Single Row Image Gallery web application’s “Radio Play” mode of use.

Previous relevant YouTube API Caller Phase Two Console Warning Tutorial is shown below.

YouTube API Caller Phase Two Console Warning Tutorial

Continuing on from yesterday’s YouTube API Caller Phase Two Text Cursor Tutorial …

What the dickens is “Console Warning”?

Well, it’s a new good friend to us using the Google Chrome web browser (but other web browsers can work it too) Web Inspector‘s division of “issue or not” reporting you can get your web applications to do via Javascript to debug or inform as the web application executes. We have found …

console.warn('Any text of your interest, not just the technical sense of a warning error in http land.');

… as a useful way to sort the chaff from the rest trying to analyse issues. Tissues for issues?! Most web application get issues from the time you give birth and well into their adolescent years to when they get deprecated and sent to “the scrapheap of the online wooooorrrrrllllddddd” … shipped off to Mars we’re predicting next … oops … too many plays of this we’re suspecting … although …

… it might have passed the notice of some?!

Anyway, the day of “shoring up” our Tabular Single Row Image Gallery web application’s “Radio Play” mode of use started with an innocent question …

Why is the web application “less flaky” just after we clear the ^{web browser} cache for an hour?

Our first suspect we just launched into without proof, but really conditionally did much less ^of …

if (('' + parent.document.URL).replace(/\%23http$/g,'#http').replace(/\#http$/g,'') == ('' + parent.document.URL)) { // ie. "Radio Play" if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') { window.sessionStorage.removeItem('loop_' + vid.split(',')[0]); } window.sessionStorage.setItem('loop_' + vid.split(',')[0], 'y'); }

… window.sessionStorage means by which to encourage the “^{single song obsessional} looping” talked about below.

Our second suspect, that the thinking above leads to, was the “encouragement of ^{single song obsessional} looping” (from audio stream of video days early on in this project, even) as distinct from …

"encouragement of ^{set of song videos} looping"

… this latter mode of use asking in our “three tier hierarchical web application environment” that …

The grandchild must be set free … aka Home Alone … to work alone and unsupported.

… an idea which is anathema to other ways we’ve worked our inhouse YouTube API calling work.

In this new wooooorrrrllllddd calls to YouTube API’s …

player.stopVideo(); /// or player.pauseVideo() for that matter

… are definite nonos, as are calls from the “middle child”. But the code is full of such calls, and other uses of player.stopVideo() suit other modes of use? Right?!

You betcha!

We need to debug which codelines containing player.stopVideo() or “middle child” calls to narrow down the relevant one or two making the web application “flaky”. Well, using codelines such as …

// Middle child ... console.warn('here at 13 ' + ('' + new Date()) + ' ' + document.getElementById('myiframe').title + ' ?vid=' + ourvid + "&playtime=" + thisd + "&start=" + document.getElementById('i' + i).value.split(';')[0] + '&ct=' + encodeURIComponent(ndt.toUTCString()) + onestodoprefix + encodeURIComponent(onestodosuffix)); // Grandchild ... console.log('' + ('' + new Date()) + ' ViD=' + vid + ' ivid=' + ivid + ' referrer=' + document.referrer + ' uRl=' + document.URL);

… with those timestamps and “relative isolation” into the console tab’s “Warning section” helping heaps, thanks ^{to the powers that be}! It got us to where we knew when to intervene … a variable kpi became -1 (the one place possible being) …

kpi=-1; console.log('document.URL=' + document.URL + ' ' + ('' + new Date())); console.warn('document.URL=' + document.URL + ' ' + ('' + new Date())); keepParentInformed();

… the debugging information of which narrowed down the contention to this fix …

… which further contributed to less …

❄️ – ( ☃️ – 🧍‍♂️ )

… via …

the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller

… especially related to the grandparent level Tabular Single Row Image Gallery web application’s “Radio Play” mode of use, where, now, if you are after some “^{single song obsessional} looping” try unchecking all checkboxes except the one of your obsession … and good luck ending the itch!

Did you know?

But the codeline ^{conditionally} ignored goes stopVideo(); not player.stopVideo(); … so what’s the go? Well, with an OOP^y class scenario with an instance of that class called player the two are equivalent. You may also see event.target.stopVideo(); which can also work within an event’s logic within the code of that class. Sorry, but we crash around the brilliance of YouTube API class purity with lots of our own ideas that cloud issues. How about the two days we spent thinking we could map player to an altplayer variable and over^map player to our non-YouTube media window object …

Non good times

… it got ditched … otherwise our thinking would have extended to Javascript functions such as stopVideo being added to the non-class Javascript to address the execution swap over! Bit crazy, thinking back, but luckily we no longer do any mapping of instances, you’ll be pleased to hear!

Previous relevant YouTube API Caller Phase Two Text Cursor Tutorial is shown below.

YouTube API Caller Phase Two Text Cursor Tutorial

As a bit of a sidestep away from the forward progress of yesterday’s YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial …

yes, we will get onto user data URI entries soon … but …
let’s, today, for mobile platforms …
1. lament they cannot have the joy of the cursors non-mobile can show you on the non-mobile screen … and our favourite is cursor:progress as an easy way to say to the user “hang on … for a bit” … so we looked for …
2. any way with “just text” (that we animate down the bottom of the leftmost table cell) … we can indicate “things are going on”

… and yes, we’ve applied this idea everywhere because it may help indicate to a user if they lose a connection, perhaps, too, as a secondary role this …

text cursor

… could play. It consists of …

Javascript creating HTML as per …

… and the accompanying CSS text content creation means …

<style> td { border: 1px dotted green; } a { text-shadow:-1px 1px 1px #ff2d95; background-color:rgba(255,255,255,0.3); } .inhouse { vertical-align: bottom; padding-bottom: 20px; } .inhouse::after { font-size: 8px; content: 'Media Gallery \a RJM Programming \a August, 2025 \a Thanks to Lorem Picsum at https://picsum.photos/ \a Thanks to YouTube at https://youtube.com \a ' attr(data-alt) attr(alt); white-space: pre-wrap; } </style>

… made to be more noticeable and animated via Javascript …

… either straight away, or when the user should expect a delay, using the changed swipe_media.html Tabular Single Row Image Gallery web application.

Previous relevant YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial is shown below.

YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial

We were hoping we could say “yesterday’s” but, three days later, the struggle is over regarding work after YouTube API Caller Phase Two Other Mimetypes Tutorial regarding sharing with someone when including …

^{(albeit, so far, restricted)} audio media mimetypes presented in an HTML audio element … and …

^{(albeit, so far, restricted)} video media mimetypes presented in an HTML video element … while today we’re adding support for …

^{(albeit, so far, restricted)} image media mimetypes presented in an HTML img element … and …

^{(albeit, so far, restricted)} other mimetypes presented in an HTML iframe element

… is achievable, but not for data URIs yet, just media URLs. That is an upcoming struggle, we’re predicting?!

Who‘d have thought Do You See What I See could be so involved …

the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” … calling …
the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller

…?

Previous relevant YouTube API Caller Phase Two Other Mimetypes Tutorial is shown below.

YouTube API Caller Phase Two Other Mimetypes Tutorial

Up until yesterday’s YouTube API Caller Phase Two Intermediate Buttons Tutorial phase two user media work established …

^{(albeit, so far, restricted)} audio media mimetypes presented in an HTML audio element … and …
^{(albeit, so far, restricted)} video media mimetypes presented in an HTML video element … while today we’re adding support for …
^{(albeit, so far, restricted)} image media mimetypes presented in an HTML img element … and …
^{(albeit, so far, restricted)} other mimetypes presented in an HTML iframe element

Not yet, but eventually, what we’re doing with the 3 hierarchies and hashtagging will be crucial for a sharing recipient to “see what you see”, and we needed tweaking of this to ensure the hashtagging order used corresponded to the order of user media (so far just URL) creations in those textboxes.

We were also correct worrying about if two such user media URLs appeared in a row, but fixed this within …

the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” … calling …
the changed karaoke_youtube_api.htm inhouse YouTube video interfacer … in turn, calling …
the modified stop_start_youtube.html YouTube API caller

Previous relevant YouTube API Caller Phase Two Intermediate Buttons Tutorial is shown below.

YouTube API Caller Phase Two Intermediate Buttons Tutorial

Further to yesterday’s YouTube API Caller Phase Two Absolute URL Tutorial‘s three tier Tabular Single Row Image Gallery web application design …

Had we been letting middle child syndrome develop?

We’d not attended to a lot of the buttons to the right of the changed karaoke_youtube_api.htm inhouse YouTube video interfacer‘s webpages, in any serious way during this latest push. But the fact is, it is worth the effort, even in terms of them …

helping better email share
shore up recovery means should connections be lost during Radio Play
help switch between video play and audio stream of video ^only play _{and vice versa} modes of Radio Play

The thing is, in the three tier design, we’ve introduced a new top tier as far as this middle tier player is concerned. But we can tailor it to use those buttons differently, and we found the onmousedown and ontouchdown events related to those buttons often useful here, depending on conditions …

… helping out in the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” mode of use.

Previous relevant YouTube API Caller Phase Two Absolute URL Tutorial is shown below.

YouTube API Caller Phase Two Absolute URL Tutorial

Onto yesterday’s YouTube API Caller Other Media Playlist Regarding Tutorial it’s taken a long time, even for the conditional blurb below to crystallize, but …

regarding testing we only did, so far, on non-mobile regarding Radio Play interspersing of YouTube media video plays with non-YouTube ones, so far …
regarding users entering their own URLs into the textboxes next to the left hand checkboxes during Radio Play usage …
regarding user entered absolute or relative URLs (but not data URIs yet) …
pointing to audio or video media mimetype data (so far)

… we finally think we have a presentable web application scenario, worth putting into the mix.

This concerns the Tabular Single Row Image Gallery web application in “Radio Play” mode of use helped out by the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in turn helped out by the modified stop_start_youtube.html YouTube API caller.

Pretty obviously, more to do, and more to shore up, but encouraging signs it’s all possible, this interspersing of YouTube media video plays with non-YouTube ones!

Previous relevant YouTube API Caller Other Media Playlist Regarding Tutorial is shown below.

YouTube API Caller Other Media Playlist Regarding Tutorial

Further to yesterday’s YouTube API Caller Other Media Playlist Compilation Tutorial it’s not going to cut the mustard with as many users …

… if you forget to put front and center what it is the user has given you as a piece of their information …

… rather than what some of us (cough, cough) can tend to do as software developers, and bury this in the data out of sight.

What could be better than yesterday’s allowing via emoji 🔀 button for Playlist creation via 11 character YouTube video ID list, albeit “some people’s cup of tea”, than to place the whole …

Playlist Thaing

… back into a user driven chance to control matters? In other words …

… and should the user go on to remember that playlist, what they entered as a YouTube Search String basis gets remembered in Radio Play webpage titling (and hence, in web browser window name lists). And the user can see how the playlist was created, especially if they named their recallable playlist well, in a more transparent way in the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” mode of use, now allowing via emoji 🔀 button for Playlist creation via 11 character YouTube video ID lists, all helped out by the changed karaoke_youtube_api.htm inhouse YouTube video interfacer.

Some Vikki Carr magic, any^one?!

Previous relevant YouTube API Caller Other Media Playlist Compilation Tutorial is shown below.

YouTube API Caller Other Media Playlist Compilation Tutorial

Onto yesterday’s YouTube API Caller Other Media Playlist Recall Tutorial …

work has progressed on Phase Two integrations, sideways then forwards, and “getting there” … but for the meantime there are other features we want here …
like a way to compile songs from our three featured music ideas into an immediately shuffled longer playlist …

… via double clicks on Radio Play 📻 emojis, as per …

… in the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” mode of use, now allowing via emoji 🔀 button for Playlist creation via 11 character YouTube video ID lists, all helped out by the changed karaoke_youtube_api.htm inhouse YouTube video interfacer.

Previous relevant YouTube API Caller Other Media Playlist Recall Tutorial is shown below.

YouTube API Caller Other Media Playlist Recall Tutorial

Onto yesterday’s YouTube API Caller Other Media Playlist Creation Tutorial …

work has progressed on Phase Two integrations, forwards, and “getting there” … but for the meantime there are other features we want here …
like more ways to recall user determined YouTube derived playlists and we found that …

… the changed karaoke_youtube_api.htm inhouse YouTube video interfacer‘s playlist recall functionality needed this overhaul …

… and feeding this into the workings of the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” mode of use.

Previous relevant YouTube API Caller Other Media Playlist Creation Tutorial is shown below.

YouTube API Caller Other Media Playlist Creation Tutorial

Onto the recent YouTube API Caller Other Media Phase Two Iframe Tutorial …

work has progressed on Phase Two integrations, forwards, and “getting there” … but for the meantime there are other features we want here …
like more ways to create user determined YouTube derived playlists and the best place we’ve found for this is via

… the changed karaoke_youtube_api.htm inhouse YouTube video interfacer‘s YouTube Search capabilities.

These searches off that top textbox can lead to a …

(user should select) multi-select dropdown … off which the user could select a number of YouTube videos (without having to know their 11 character IDs) … and then …
click the new Radio📻? button … to hook in with …
the changed swipe_media.html Tabular Single Row Image Gallery web application “Radio Play” mode of use

Stay tuned for more ways to create playlists!

Previous relevant YouTube API Caller Other Media Phase Two Iframe Tutorial is shown below.

YouTube API Caller Other Media Phase Two Iframe Tutorial

Yesterday’s YouTube API Caller Other Media Phase Two Interfacing Tutorial featured the use of …

popup windows … much maligned … so if there is a way we can transfer to the less maligned …
iframe

… keeping the work within the one window, that would be good, yes? Happily, yes is the go, and with little bother too, with referencing code structure like …

… essentially unaffected by the pretty dramatic change of window usage configuration. Cute, huh?! But how is this made to happen? It’s really simple, really, as the second parameter of window.open can point to an iframe name attribute …

<iframe name=radioif id=radioif data-laterclick="" data-position=relative data-top=0 data-left=0 data-width=0 data-height=0 data-z=-999 style=display:none; src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm#http'></iframe>

… and then we can wrap window.open calls, in amongst very “overlay” minded Javascript code, into our new inhouse “function windowopen” …

… happening in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in “Radio Play” mode.

And then there was “what we noted as a to do” as …

make click on checkbox after textbox entry work

… in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in “Radio Play” mode.

And so, for the rest of the day, more progress, but still not there with …

the modified stop_start_youtube.html YouTube API caller … supervised by …
the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in “Radio Play” mode

Previous relevant YouTube API Caller Other Media Phase Two Interfacing Tutorial is shown below.

YouTube API Caller Other Media Phase Two Interfacing Tutorial

Onto the recent YouTube API Caller Other Media Interfacing Tutorial we found that …

isolation interfacing as in our first designated phase 1 … is a doddle compared to when …
interfacing among a number of players in this (what pans out to be day one of) phase 2

… making it work in with the supervisor of YouTube API “inhouse” web application, and all it’s usage incarnations. We did not expect otherwise. but naturally hoped for the miracle of it all happening in a day.

Never mind … but what can we say about phase 2 we got “contained” today. It’s, to our mind …

start up supervisor of YouTube API “inhouse” web application in “Radio Play” simulated mode (ie. #http hashtag) …
enter in an 11 character YouTube ID (eg.

0Gz_7am23rk

) and tab out …
click first left hand checkbox …
in the textbox to the right enter a media URL (we’ve been doing) like …

/Mac/iPad/slide1.m4a

… (and we are not ready for data URIs yet) … and tab out …
^{at this stage, so far} a new popup window opens
non YouTube media plays on non-mobile starting muted … and at the end of it’s play …
the user can close popup to return to original supervisor of YouTube API “inhouse” web application incarnation

Further along, but not there yet, with …

the modified stop_start_youtube.html YouTube API caller … supervised by …

the changed karaoke_youtube_api.htm inhouse YouTube video interfacer

Previous relevant YouTube API Caller Other Media Interfacing Tutorial is shown below.

YouTube API Caller Other Media Interfacing Tutorial

Today’s work is the result of a “generic push” by us to improve on attempts in the past to use our inhouse YouTube video playing interfacing suite of web applications to mix …

YouTube video media content … interspersed with …
non YouTube media content

… when we presented Spliced Audio/Video YouTube Shuffle Tutorial blog posting thread. We better like this “generic push” idea of adapting our inhouse YouTube API interfacing web application to process both types of media input categories and be handled just within it’s remit, if there are non YouTube media items, within a (newly nesting) …

table element … with …
left hand cell handling YouTube video media content presented via YouTube API’s iframe element approach … and the …
right hand cell handling non YouTube video media content presented via video or audio or img or iframe element depending on the data mimetype …

… and it is our inhouse YouTube API interfacing web application’s job to toggle between CSS display:none; and display:table-cell; for these two cells appropriately.

This work we see as a two part mini-project where …

today’s phase 1 work isolates that inhouse YouTube API interfacing web application and asks it to handle new hashtag based data arguments coming in to demonstrate it, in that isolation, works both for the new paradigm and any previous scenarios … and then …
after today we start phase 2 work interfacings, where we will rejoin the blog posting thread of yesterday’s Tabular Single Row Emoji Sharing Menu Tutorial and allow for the smarter inhouse YouTube API interfacing web application to be relatively seamless changing between YouTube and non YouTube media playing should a user enter a data URI, for example, in one of those textboxes to the right of the checkboxes

… for the modified stop_start_youtube.html YouTube API caller.

Here is a non YouTube video example …

… and here is a YouTube example …

… and here is a non YouTube audio example …

… and here is a non YouTube animated GIF example …

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

Posted in eLearning, GIMP, Operating System, Tutorials | Tagged attachment, contact sheet, desktop, Did you know, download, email, GIMP, image editor, image map, imge, macOS, operating system, PaintBrush, PDF, pdf to image, Preview, resize, screen, screenshot, tutorial, upload, view, zoom, zoom out | Leave a comment

Random Background Image Map Integration Tutorial

Posted on June 24, 2026 by admin

Random Background Image Map Integration Tutorial

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.

Inhouse Image Map WordPress Integration Tutorial

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 …

… 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.

Inhouse Image Map Creator Browsing Tutorial

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 …

… 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.

Inhouse Image Map Creator Mobile Debug Tutorial

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 …

allow for data URIs pasted into the prompt window
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.

Inhouse Image Map Creator Interactive Drill Down Tutorial

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.

Inhouse Image Map Creator Drill Down Tutorial

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.

Inhouse Image Map Creator Tutorial

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 …

we stop user web page scrolling … while still allowing …
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 …

containing image map HTML … and/or …
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.

WordPress Blog Image Editing Media Tutorial

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 …

lots of data
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 ~~Madness~~Magic” 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 📹</button> <button onclick="top.agshow();">Animated GIF 🖼</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 …

… 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 📹 " + arrbw[jime] + "'></input> <input type=submit style=display:none;background-color:lightblue; id=aglist" + butsuff + " name=aglist" + butsuff + " value='Animated GIF 🖼 " + 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.

WordPress Blog Posting Feature Image Editing Tutorial

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.

One Image Website Image Snapshot Editing Tutorial

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.

One Image Website SessionStorage Image Filtering Tutorial

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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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.

One Image Website iOS Radio Music One Less Tutorial

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 …

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

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 ... 🎶 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 ...</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.

Responsive Web Design Landing Page Image Map Tutorial

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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged Apple, apple white lead, area, background, background image, browse, browsing, canvas, co-ordinates, connection, creator, data uri, data url, debug, debugging, developer, developer menu, double click, drawImage, event, hashtag, HTML, HTML5, image, image file, image map, image map creator, img, integration, iOS, iPhone, Javascript, lead, local web server, Lorem Picsum, MAMP, map, media, media file, mobile, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, prompt, random, rectangle, resize, rubber band, rubberbanding, Safari, screen, shape, textarea, toDataURL, tool, tutorial, web browser, webpage, Wordpress, z-index | Leave a comment

Inhouse Image Map WordPress Integration Tutorial

Posted on June 23, 2026 by admin

Inhouse Image Map WordPress Integration Tutorial

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 …

… 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.

Inhouse Image Map Creator Browsing Tutorial

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!

… 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.

Inhouse Image Map Creator Mobile Debug Tutorial

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 …

… 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 …

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

And what about …

allow for data URIs pasted into the prompt window
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.

Inhouse Image Map Creator Interactive Drill Down Tutorial

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

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.

Inhouse Image Map Creator Drill Down Tutorial

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

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

Inhouse Image Map Creator Tutorial

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.

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

we stop user web page scrolling … while still allowing …
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 …

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

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

WordPress Blog Image Editing Media Tutorial

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

lots of data
but understood everywhere

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some “Mantissa ~~Madness~~Magic” takes place using …

… 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 …

… 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 …

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

WordPress Blog Posting Feature Image Editing Tutorial

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

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 …

… 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.

One Image Website Image Snapshot Editing Tutorial

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

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 …

… 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

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.

One Image Website SessionStorage Image Filtering Tutorial

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)

Aaaaaahhhhh

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

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 …

… 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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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

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”

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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?

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!

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

One Image Website iOS Radio Music One Less Tutorial

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.

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

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

"The Commute"

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 ... 🎶 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 ...</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

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

Responsive Web Design Landing Page Image Map Tutorial

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?!

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.

<?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 …

… to call on that new PHP …

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

… 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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged Apple, apple white lead, area, browse, browsing, canvas, co-ordinates, connection, creator, data uri, data url, debug, debugging, developer, developer menu, double click, drawImage, event, hashtag, HTML, HTML5, image, image file, image map, image map creator, img, integration, iOS, iPhone, Javascript, lead, local web server, MAMP, map, media, media file, mobile, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, prompt, rectangle, resize, rubber band, rubberbanding, Safari, screen, shape, textarea, toDataURL, tool, tutorial, web browser, webpage, Wordpress, z-index | Leave a comment

WordPress Blog Mobile User Title Attribute Access Tutorial

Posted on June 22, 2026 by admin

WordPress Blog Mobile User Title Attribute Access Tutorial

Today, we’re revisiting the WordPress Plugin ideas of WordPress Blog Collaborative Annotated Email Cedes to Context Menu Tutorial to rework the ideas a bit to, so that …

if within the highlighted text the user creates, behind the scenes, within the underlying HTML code, there is an HTML element title attribute a non-mobile user can hover over and see it like a tooltip …
we’re showing that first such title attribute content in red for both non-mobile and mobile users within the green background menu that is presented below the user highlighting

… giving mobile users a chance to see some of these title attribute pieces of information that are generally the preserve of just non-mobile users.

You can see how this happened with …

changed PHP rjmprogramming-multi-lookup.php plugin working in conjunction with …
good ol’ changed TwentyTen theme header.php file …
<?php echo ”
function nocarets(inht, wrt) { var wfound=false, iwf=0, jwf=0; var wrts=wrt.replace(/\ \ /g,' ').replace(/\ \ /g,' ').replace(/\ \ /g,' ').split(' '); if (eval('' + wrts.length) == 1) { return ''; } var theone=0, thetwo=1; var uptoone=wrts[theone]; var uptotwo=wrt.substring(eval(1 + uptoone.length)); var outht=inht; var outins=inht.split('<'), iouts=0; if (inht.indexOf('>') != -1 && inht.indexOf('<') != -1) { outht=outins[0].replace(/\ \;/g,' '); for (iouts=1; iouts<outins.length; iouts++) { outht+=outins[iouts].split('>')[eval(-1 + outins[iouts].split('>').length)].replace(/\ \;/g,' '); for (jwf=0; jwf<eval(-1 + wrts.length); jwf++) { theone=jwf; thetwo=eval(1 + theone); if (!wfound && outht.replace(/\ \ /g,' ').replace(/\ \ /g,' ').replace(/\ \ /g,' ').indexOf(wrts[theone] + ' ' + wrts[thetwo]) != -1) { if (outins[iouts].split(outins[iouts].split('>')[eval(-1 + outins[iouts].split('>').length)])[0].indexOf(' title=\"') != -1) { wfound=true; uptoone=''; for (iwf=0; iwf<=theone; iwf++) { if (iwf == 0) { uptoone=wrts[iwf]; } else { uptoone+=' ' + wrts[iwf]; } } uptotwo=wrt.substring(eval(1 + uptoone.length)); return '<span id=\"phftop\">' + uptoone + ' <sup><font size=1 color=red>' + outins[iouts].split(outins[iouts].split('>')[eval(-1 + outins[iouts].split('>').length)])[0].split(' title=\"')[1].split('\"')[0] + '</font></sup> ' + uptotwo + '</span><br>'; } } } } } return ''; //outht; } function plookfortitles(inwithrespectto) { //if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { // return ''; //} var withrespectto=inwithrespectto; //.replace(/\ \.\.\.\ \ $/g,'').replace(/\ \.\.\.\ $/g,'').replace(/\ \.\.\.$/g,'').split('...')[0]; var withinbit=''; if (withrespectto.trim() != '') { var itsarep=document.body.innerText.split(withrespectto); var ihsarep=document.body.innerHTML.split(withrespectto); var ihsncarep=''; if (eval('' + itsarep.length) == 2 && eval('' + ihsarep.length) != 2) { if (eval('' + ihsarep.length) == 1 && eval('' + document.body.innerHTML.split(withrespectto.split(' ')[0] + ' ').length) == 2) { withinbit=document.body.innerHTML.split(withrespectto.split(' ')[0] + ' ')[1].split('/')[1]; if (withinbit.indexOf(' title=\"') != -1) { return '<span id=\"phftop\">' + '' + withrespectto.split(' ')[0] + withrespectto.replace(withrespectto.split(' ')[0], '') + ' <sup><font size=1 color=red>' + withinbit.split(' title=\"')[1].split('\"')[0] + '</font></sup></span><br>'; } else { ihsncarep=nocarets(document.body.innerHTML, withrespectto); if (ihsncarep != '') { return ihsncarep; } //return '01:@' + withrespectto + ('@ itsarep.length.ihsarep.length=' + itsarep.length + '.' + ihsarep.length) + ' ' + eval('' + document.body.innerHTML.split(withrespectto.split(' ')[0] + ' ').length) + '<br>'; } } else if (eval('' + ihsarep.length) == 1 && eval('' + document.body.innerHTML.split(withrespectto.split(' ')[0] + ' <').length) == 2) { withinbit=document.body.innerHTML.split(withrespectto.split(' ')[0] + ' <')[1].split('/')[1]; if (withinbit.indexOf(' title=\"') != -1) { return '' + withrespectto.split(' ')[0] + withrespectto.replace(withrespectto.split(' ')[0], '') + ' <sup><font size=1 color=red>' + withinbit.split(' title=\"')[1].split('\"')[0] + '</font></sup><br>'; } else { ihsncarep=nocarets(document.body.innerHTML, withrespectto); if (ihsncarep != '') { return ihsncarep; } //return '001:@' + withrespectto + ('@ itsarep.length.ihsarep.length=' + itsarep.length + '.' + ihsarep.length) + '<br>'; } } else { ihsncarep=nocarets(document.body.innerHTML, withrespectto); if (ihsncarep != '') { return ihsncarep; } //return '02:@' + withrespectto + ('@ itsarep.length.ihsarep.length=' + itsarep.length + '.' + ihsarep.length) + '<br>'; } } else if (document.body.innerText.indexOf(' element a new ') != -1) { ihsncarep=nocarets(document.body.innerHTML, withrespectto); if (ihsncarep != '') { return ihsncarep; } //return '03:@' + withrespectto + ('@ Itsarep.length.ihsarep.length=' + itsarep.length + '.' + ihsarep.length + ' ? ' + document.body.innerText.split(' element a new ')[1].substring(0,78)) + '<br>'; } } else { ihsncarep=nocarets(document.body.innerHTML, withrespectto); if (ihsncarep != '') { return ihsncarep; } //return '04:' + '<br>'; } return ''; }
“; ?>

… a non-mobile user can use too …

Previous relevant WordPress Blog Collaborative Annotated Email Cedes to Context Menu Tutorial is shown below.

WordPress Blog Collaborative Annotated Email Cedes to Context Menu Tutorial

Up until the work of this blog posting (a few days ago by the time this posting “goes to air”) the “highlighted text” on this WordPress Blog work talked about with WordPress Blog Collaborative Annotated Email FormData Post Tutorial only talked about the inhouse aspects to this functionality, perhaps understandably.

This was quite brazen, and today we set out to “un”brazen it. What happens when you highlight text on a webpage and two finger gesture on macOS or right click on Windows? Yes, you are presented with a “Context Menu” (containing “Copy” option at the very least) dependent on the web browser and operating system overseeing that webpage.

Well, quite often our “inhouse work” was effectively “swallowing up” the chance to get to the “Context Menu” because not enough delay had been coded into our functionality.

And so, onto this WordPress Blog’s Twenty Ten theme’s header.php we changed …

… meant that both the “Context Menu” and our “inhouse menu” could co-exist happily.

Previous relevant WordPress Blog Collaborative Annotated Email FormData Post Tutorial is shown below.

WordPress Blog Collaborative Annotated Email FormData Post Tutorial

Yesterday’s WordPress Blog Collaborative Annotated Email User Experience Tutorial helped with practicalities regarding user experience with this WordPress Blog highlighting of text accumulated into the body (as HTML attachment) and subject (as text) of an Annotated Email form of collaborative communication.

The “subject” extension here makes it all the more important to try to look out for long email URLs that will exceed the web server limit here. When too long, that …

previous GET method of navigation … needs to be converted to a …
POST method of navigation

… and today we do not write out any discrete HTML form element to do this (when required), but instead resort to the wonderfully powerful combination of …

Ajax XMLHttpRequest object … as the conduit for …
FormData object

… to be used by the new dynamic thinking Javascript function as below …

… called in that different calling arrangement as per …

document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;cursor:pointer;text-decoration:none;" onclick="iftoolongpost(this.title, encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)), encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60)))));" data-href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=" target=aeciframe onmouseover="this.title=emaileeis(this.title);" ontouchstart="this.title=emaileeis(this.title);" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe id=aeciframe name=aeciframe style=display:none; src=#></iframe><br>';

… featuring in changed PHP rjmprogramming-multi-lookup.php plugin and/or changed TwentyTen theme header.php file.

Previous relevant WordPress Blog Collaborative Annotated Email User Experience Tutorial is shown below.

WordPress Blog Collaborative Annotated Email User Experience Tutorial

Did you try yesterday’s WordPress Blog Collaborative Annotated Email Tutorial highlighting of text Annotated Email functionality? If you did, you might have found a “hair trigger” timed user experience. You had a very small amount of time to decide on any amendments “by hand” to your email.

On this, did you notice how we relied on a Javascript prompt window to garner an email address off the user? There is method in this “kludginess”. We wanted the highlighting not to be destroyed by a change of focus. The downside though, is that the whole time you spend answering contributes to any setTimeout based timing we have going before we automatically make the highlighting functionality menu disappear. Today, we control that, waiting an extra 10 seconds or so after that for the user to start entering their own Annotated Email content, should they wish, and the HTML div contenteditable=true is reminded by a new onchange replenishment of the delay that the user is still writing … a bit like with SMSes and those blinking dots telling you the other SMSer is writing something (but not as cute here, looks wise, alas).

Again, into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …

Some email clients baulk at downloading HTML attachments, so the other change today is to append the wording of the email’s inherent HTML to the email subject, so if an emailee is unlucky in this way, they can still get “second prize” … but no cigar!

Previous relevant WordPress Blog Collaborative Annotated Email Tutorial is shown below.

WordPress Blog Collaborative Annotated Email Tutorial

Further to WordPress Plugin Primer Tutorial of recent times, we’re adding to that “highlighting of blog text” (dynamic menu) the options …

Email (that highlighted text) via the email client application via a “mailto:” “a” link
SMS (that highlighted text) via the email client application via a “sms:” “a” link
Annotated Email of the highlighted text converted to mark (marked up) text, accumulated onto for the whole WordPress blog session,and emailed off via PHP’s mail function, as an HTML email attachment (downloaded at the emailee end)

… and we think the last of these has good scope for collaborative thoughts and usages. Want to try it out? You’re here, ready. Just highlight some text to get started.

Into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …

Previous relevant WordPress Plugin Primer Tutorial is shown below.

WordPress Plugin Primer Tutorial

Normally we make changes to this TwentyTen themed WordPress blog by changing that theme’s wp-content/themes/twentyten/header.php file. But today we show you how to write the PHP code needed to write a WordPress.org admin login plugin to create a hyperlink to a Wikipedia page regarding any text you have highlighted on your WordPress admin area webpage.

We thank …

… and we think you should read …

For us, with our very simple rjmprogramming-wikipedia-lookup.php plugin, we only needed the one piece of PHP to sit in the current WordPress wp-content/plugins directory, and then immediately be accessible to the WordPress blog admin area’s Plugins -> Activate option …

<?php /** * @package Rjmprogramming_Wikipedia_Lookup * @version 1.6 */ /* Plugin Name: Rjmprogramming Wikipedia Lookup Description: Float a Wikipedia lookup link for highlighted text of an admin webpage. Author: Robert James Metcalfe Version: 1.6 Author URI: http://www.rjmprogramming.com.au/ */ // This creates the Wikipedia lookup hyperlink function rjmprogramming_wikipedia_lookup() { $wikipedia_page = "Wikipedia Main Page"; echo '<a target="_blank" title="Wikipedia lookup of ..." onmouseover="var xsel=' . "''" . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' . ' xsel=document.selection.createRange().htmlText;' . ' } if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " ontouchstart="var xsel=' . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' . ' xsel=document.selection.createRange().htmlText; }' . ' if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " id="rjmprogramming_wikipedia_lookup"' . ' href="//wikipedia.org/wiki/Main_Page">' . $wikipedia_page . '</a>'; } // Now we set that function up to execute when the admin_notices action is called add_action( 'admin_notices', 'rjmprogramming_wikipedia_lookup' ); // We need some CSS to position the hyperlink function rjmprogramming_wikipedia_css() { // This makes sure that the positioning is also good for right-to-left languages $x = is_rtl() ? 'left' : 'right'; echo " <style type='text/css'> #rjmprogramming_wikipedia_lookup { float: $x; padding-$x: 15px; padding-top: 5px; margin: 0; font-size: 11px; } </style> "; } add_action( 'admin_footer', 'rjmprogramming_wikipedia_css' ); ?>

We hope this is of interest to you.

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

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged attribute, blog, caret, content, cursor, header.php, highlight, hover, HTML, innerText, Javascript, long hover, mobile, onhover, PHP, plugin, programming, selection, text, title, title attribute, tooltip, tutorial, TwentyTen, TwentyTen theme, user, Wordpress | Leave a comment

Inhouse Image Map Creator Browsing Tutorial

Posted on June 21, 2026 by admin

Inhouse Image Map Creator Browsing Tutorial

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!

… 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.

Inhouse Image Map Creator Mobile Debug Tutorial

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 …

… 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 …

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

And what about …

allow for data URIs pasted into the prompt window
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.

Inhouse Image Map Creator Interactive Drill Down Tutorial

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

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.

Inhouse Image Map Creator Drill Down Tutorial

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

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

Inhouse Image Map Creator Tutorial

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.

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

we stop user web page scrolling … while still allowing …
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 …

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

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

WordPress Blog Image Editing Media Tutorial

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

lots of data
but understood everywhere

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some “Mantissa ~~Madness~~Magic” takes place using …

… 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 …

… 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 …

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

WordPress Blog Posting Feature Image Editing Tutorial

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

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 …

… 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.

One Image Website Image Snapshot Editing Tutorial

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

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 …

… 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

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.

One Image Website SessionStorage Image Filtering Tutorial

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)

Aaaaaahhhhh

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

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 …

… 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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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

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”

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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?

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!

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

One Image Website iOS Radio Music One Less Tutorial

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.

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

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

"The Commute"

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 ... 🎶 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 ...</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

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

Responsive Web Design Landing Page Image Map Tutorial

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?!

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.

<?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 …

… to call on that new PHP …

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

… 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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged Apple, apple white lead, area, browse, browsing, canvas, co-ordinates, connection, creator, data uri, data url, debug, debugging, developer, developer menu, double click, drawImage, event, HTML, HTML5, image, image file, image map, image map creator, img, iOS, iPhone, Javascript, lead, local web server, MAMP, map, media, media file, mobile, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, prompt, rectangle, resize, rubber band, rubberbanding, Safari, screen, shape, textarea, toDataURL, tool, tutorial, web browser, webpage, z-index | Leave a comment

Inhouse Image Map Creator Mobile Debug Tutorial

Posted on June 20, 2026 by admin

Inhouse Image Map Creator Mobile Debug Tutorial

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 …

… 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 …

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

And what about …

allow for data URIs pasted into the prompt window
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.

Inhouse Image Map Creator Interactive Drill Down Tutorial

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

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.

Inhouse Image Map Creator Drill Down Tutorial

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

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

Inhouse Image Map Creator Tutorial

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.

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

we stop user web page scrolling … while still allowing …
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 …

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

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

WordPress Blog Image Editing Media Tutorial

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

lots of data
but understood everywhere

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some “Mantissa ~~Madness~~Magic” takes place using …

… 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 …

… 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 …

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

WordPress Blog Posting Feature Image Editing Tutorial

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

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 …

… 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.

One Image Website Image Snapshot Editing Tutorial

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

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 …

… 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

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.

One Image Website SessionStorage Image Filtering Tutorial

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)

Aaaaaahhhhh

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

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 …

… 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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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

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”

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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?

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!

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

One Image Website iOS Radio Music One Less Tutorial

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.

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

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

"The Commute"

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 ... 🎶 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 ...</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

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

Responsive Web Design Landing Page Image Map Tutorial

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?!

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.

<?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 …

… to call on that new PHP …

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

… 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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Hardware, iOS, Tutorials | Tagged Apple, apple white lead, area, co-ordinates, connection, creator, debug, debugging, developer, developer menu, double click, event, HTML, image, image map, image map creator, img, iOS, iPhone, Javascript, lead, map, mobile, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, prompt, rectangle, resize, rubber band, rubberbanding, Safari, screen, shape, textarea, tool, tutorial, web browser, webpage, z-index | Leave a comment

Inhouse Image Map Creator Interactive Drill Down Tutorial

Posted on June 19, 2026 by admin

Inhouse Image Map Creator Interactive Drill Down Tutorial

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

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.

Inhouse Image Map Creator Drill Down Tutorial

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

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

Inhouse Image Map Creator Tutorial

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.

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

we stop user web page scrolling … while still allowing …
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 …

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

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

WordPress Blog Image Editing Media Tutorial

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

lots of data
but understood everywhere

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some “Mantissa ~~Madness~~Magic” takes place using …

… 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 …

… 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 …

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

WordPress Blog Posting Feature Image Editing Tutorial

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

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 …

… 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.

One Image Website Image Snapshot Editing Tutorial

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

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 …

… 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

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.

One Image Website SessionStorage Image Filtering Tutorial

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)

Aaaaaahhhhh

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

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 …

… 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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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

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”

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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?

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!

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

One Image Website iOS Radio Music One Less Tutorial

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.

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

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

"The Commute"

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 ... 🎶 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 ...</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

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

Responsive Web Design Landing Page Image Map Tutorial

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?!

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.

<?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 …

… to call on that new PHP …

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

… 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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged area, co-ordinates, creator, double click, event, HTML, image, image map, image map creator, img, Javascript, map, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, prompt, rectangle, resize, screen, shape, textarea, tool, tutorial, webpage, z-index | Leave a comment

Inhouse Image Map Creator Drill Down Tutorial

Posted on June 18, 2026 by admin

Inhouse Image Map Creator Drill Down Tutorial

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

Previous relevant Inhouse Image Map Creator Tutorial is shown below.

Inhouse Image Map Creator Tutorial

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.

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

we stop user web page scrolling … while still allowing …
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 …

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

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

WordPress Blog Image Editing Media Tutorial

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

lots of data
but understood everywhere

How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some “Mantissa ~~Madness~~Magic” takes place using …

… 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 …

… 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 …

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

WordPress Blog Posting Feature Image Editing Tutorial

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

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 …

… 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.

One Image Website Image Snapshot Editing Tutorial

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

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 …

… 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

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.

One Image Website SessionStorage Image Filtering Tutorial

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)

Aaaaaahhhhh

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

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 …

… 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.

One Image Website Scrolling Position Fix Tutorial

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.

One Image Website VTT Tracks Tutorial

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

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”

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.

Ffmpeg Log Helper Towards VTT File Primer Tutorial

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?

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!

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

One Image Website iOS Radio Music One Less Tutorial

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.

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

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

… 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 …

… 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.

One Image Website iOS Radio Music Tutorial

"The Commute"

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 ... 🎶 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 ...</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

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

Responsive Web Design Landing Page Image Map Tutorial

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?!

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.

<?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 …

… to call on that new PHP …

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

… 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” …

… 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.

Responsive Web Design Landing Page Incarnation Tutorial

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 ~~margarine~~butter!

Previous relevant Responsive Web Design Primer Tutorial is shown below.

Responsive Web Design Primer Tutorial

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.

Unresponsive Landing Page

Responsive Shell around Unresponsive Landing Page

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged area, co-ordinates, creator, double click, event, HTML, image, image map, image map creator, img, Javascript, map, mouse, mouse position, non-mobile, onclick, ondblclick, overlay, popup, position, programming, rectangle, resize, screen, shape, textarea, tool, tutorial, webpage, z-index | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
June 2026

S M T W T F S

1 2 3 4 5 6

7 8 9 10 11 12 13

14 15 16 17 18 19 20

21 22 23 24 25 26 27

28 29 30

« May
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game games Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser
Your Background Image
OnTopList

Walking Trip …

Preview Image Map PDF to Image Basis Preparation Tutorial

WordPress Blog Mobile User Title Attribute Access Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList