{"id":15564,"date":"2015-06-23T05:01:43","date_gmt":"2015-06-22T19:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=15564"},"modified":"2015-10-13T09:51:12","modified_gmt":"2015-10-12T23:51:12","slug":"australian-indigenous-language-image-map-dropdown-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-image-map-dropdown-tutorial\/","title":{"rendered":"Australian Indigenous Language Image Map Dropdown Tutorial"},"content":{"rendered":"
\"Australian<\/a>

Australian Indigenous Language Image Map Dropdown Tutorial<\/p><\/div>\n

Today we mix geography and history in an image map<\/a> web application exploring Indigenous Australian Language, History and Culture. We’ll be devoting a blog posting to the subject in the future, but today’s tutorial, extending on yesterday’s Australian Indigenous Language Image Map Primer Tutorial<\/a> and its promise of more Javascript DOM functionality to follow, uses a Javascript DOM technique we term here, the “Javascript DOM Big Changes” technique, which is the idea of manipulating “document.body.innerHTML” as a whole.<\/p>\n

This technique of manipulating “document.body.innerHTML” as a whole is all fine to do, but you should remember with it that values the user has set, since, with dropdown selection, for instance, need to be taken into account, as a separate stage afterwards, with this method … you’ll see what we mean …<\/p>\n


\nfunction selchange(osel) {
\n var ov=osel.value;
\n var oi=osel.id;
\n document.body.innerHTML = document.body.innerHTML.replace(\/\" target=\"_blank\"\/g, \"+'\" + ov.replace(\/ \/g, \"%20\") + \"'\" + '\" target=\"_blank\"');
\n document.getElementById(oi).value = ov;
\n}
\n<\/code><\/p>\n

… in code above, for the dropdown’s “onchange” event logic … or by trying your own scenarios … which am 100% certain you’ll be beavering away at within minutes of reading today’s offering?!<\/p>\n

Is the “document.body.innerHTML” a refresh? It sort of acts like one, but it is more as well, because you have your own logic controls over what gets “refreshed into” … something a little more comfortable, perhaps?!<\/p>\n

Now, back to the real world purpose of this technique. Yesterday we established a “MobileFish” inspired HTML map element scenario with the following components …<\/p>\n