{"id":23654,"date":"2016-08-01T03:01:09","date_gmt":"2016-07-31T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=23654"},"modified":"2016-08-20T23:54:31","modified_gmt":"2016-08-20T13:54:31","slug":"trip-mobile-device-usage-web-application-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/trip-mobile-device-usage-web-application-tutorial\/","title":{"rendered":"Trip Mobile Device Usage Web Application Tutorial"},"content":{"rendered":"
\"Trip<\/a>

Trip Mobile Device Usage Web Application Tutorial<\/p><\/div>\n

We left off with our trip<\/i> mobile device usage series of blog posts at Trip Mobile Device Camera Versus Hard Copy Scan Tutorial<\/a> below by leaving you with …<\/p>\n

\nWith the resultant printer scanned soft copy, this becomes useful for us to develop a web application in future postings.\n<\/p><\/blockquote>\n

… and so, today, we use that printer scanned image file to good effect, we hope, by presenting a “click and explore” type of web application, and by so doing, reopen that favoured subject of ours, the admiration we have for the HTML map<\/a> element.<\/p>\n

As far as practically creating an HTML map element goes, we’ve never found anything better than the great Mobilefish “create your own image map” functionality<\/a> and today’s web application benefits from this fantastic website’s work, yet again.<\/p>\n

Don’t know about you, but find it satisfying (in a peculiar “UX”<\/a> way) to click on an unadorned image at an obvious (“red rag to a bull”) place to be able to zero in on information I need, today supplied by creating two window.open<\/a> popup windows per click, and calling into play that web application we talked about, as the “child iframe” part, when we presented HTML\/Javascript Window Open URLs Primer Tutorial<\/a>. So, yes, you guessed it, the recipe goes like this …<\/p>\n

    \n
  1. create the list of places visited on notepad, the contents for which we got assisted by mobile device technology we explained at Trip Mobile Device Usage Remembering Tutorial<\/a> … ie. a paper one … egad!<\/i><\/li>\n
  2. printer scan this hard copy into soft copy image file as we showed you with Trip Mobile Device Camera Versus Hard Copy Scan Tutorial<\/a> … ie. that’s better …
    <\/img><\/li>\n
  3. get Mobilefish “create your own image map” functionality<\/a> to help you to create HTML featuring a huge HTML map element referencing that soft copy image file and with onclick<\/i><\/a> events … and this bit is that little bit different to any other so far for today’s job …<\/li>\n
  4. add in an HTML iframe element that is called at the HTML map element onclick<\/i> event logics to call the “child iframe” HTML parts of HTML\/Javascript Window Open URLs Primer Tutorial<\/a> to open appropriate window.open<\/a> popup windows (of Google searches<\/a> and Google Maps<\/a> … thanks) for our purpose … to inform and entertain, or perhaps give you a framework for your own web application to remind yourself of your last trip<\/i>, we hope<\/li>\n<\/ol>\n

    So, do you want to see a bit about London? Even if you feel this way