{"id":24615,"date":"2016-09-02T03:01:17","date_gmt":"2016-09-01T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24615"},"modified":"2016-09-01T22:39:48","modified_gmt":"2016-09-01T12:39:48","slug":"legend-for-and-from-html-map-element-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-primer-tutorial\/","title":{"rendered":"Legend for and from HTML Map Element Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Legend for and from HTML Map Element Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.jpg\" title=\"Legend for and from HTML Map Element Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Legend for and from HTML Map Element Primer Tutorial<\/p><\/div>\n<p>Have you ever noticed the synergies between the HTML <a target=_blank title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element and the HTML <a target=_blank title='HTML table information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_tables.asp'>table<\/a> element?  What would happen if we, in broad brush terms &#8230;<\/p>\n<ul>\n<li>change &#8220;map&#8221; to &#8220;table&#8221; &#8230; and &#8230;<\/li>\n<li>change &#8220;<a target=_blank title='HTML area information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a>&#8221; to &#8220;tr-td-a-<a target=_blank title='HTML svg information from w3schools' href='http:\/\/www.w3schools.com\/svg\/'>svg<\/a>&#8211;<a target=_blank title='HTML svg polygon information from w3schools' href='http:\/\/www.w3schools.com\/svg\/svg_polygon.asp'>polygon<\/a>&#8221; (&#8220;\/area&#8221; to &#8220;\/polygon-\/svg-\/a-\/td-\/tr&#8221;)<\/li>\n<\/ul>\n<p>?  Well, we think we&#8217;d be close to getting a &#8220;legend&#8221; of a map or some other type of data, perhaps.<\/p>\n<p>So we have started down the road towards this idea with our first draft of just clientside HTML and Javascript, and channeling that great HTML5 Rocks information from this <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>great link<\/a>, thanks, to allow you to &#8220;Browse&#8221; (button) for local HTML files, as well as the ability to browse an HTML url or just feed in the raw HTML into an HTML <a target=_blank title='HTML textarea tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element we provide within an HTML form (method=GET and sending data back to this same web application).  And what is that web application?  We&#8217;ve called it <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html_GETME\" title='legend_via_map.html'>legend_via_map.html<\/a> and you can try it out with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html\" title='Click picture'>live run<\/a> link.  Ahead of time we &#8220;baked a cake&#8221; with some examples of usage below &#8230;<\/p>\n<ul>\n<li id='mylitoday'><a target=_blank title='Indigenous Australia Language Map' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2FImageMap%2FLanguages%2Faboriginal_language_regions.html&#038;tarea=&#038;submit=Create+Legend+for+HTML+Map+Data&#038;showlabel=on'>Indigenous Australia Language Map<\/a> &#8230; <a style='text-decoration:underline;' onclick=\"document.getElementById('myiftoday').src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2FImageMap%2FLanguages%2Faboriginal_language_regions.html&#038;tarea=&#038;submit=Create+Legend+for+HTML+Map+Data&#038;showlabel=on#myth'; document.getElementById('myiftoday').style.display='block';   \">or below<\/a><br \/><iframe id='myiftoday' title='Indigenous Australia Language Map' src='' style='width:100%;height:600px;display:none;'><\/iframe><\/li>\n<li><a target=_blank title='India State Map' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Findia_map.html&#038;tarea=&#038;submit=Create+Legend+for+HTML+Map+Data&#038;showlabel=on'>India State Map<\/a><\/li>\n<li><a target=_blank title='ESL Vocabulary - Living Room' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2Flivingroom.html&#038;tarea=&#038;submit=Create+Legend+for+HTML+Map+Data&#038;showlabel=off'>ESL Vocabulary &#8211; Living Room<\/a><\/li>\n<li><a target=_blank title='ESL Vocabulary - Kitchen Corner' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.html?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FKitchenCorner%2Findex.html&#038;tarea=&#038;submit=Create+Legend+for+HTML+Map+Data&#038;showlabel=off'>ESL Vocabulary &#8211; Kitchen Corner<\/a><\/li>\n<\/ul>\n<p>If you&#8217;re looking to create your own HTML map web application we highly recommend the use of the great <a target=_blank title='Mobilefish Image map Creator functionality ... thanks' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>Mobilefish &#8220;create your own image map&#8221; functionality<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24615' onclick='var dv=document.getElementById(\"d\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24615' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever noticed the synergies between the HTML map element and the HTML table element? What would happen if we, in broad brush terms &#8230; change &#8220;map&#8221; to &#8220;table&#8221; &#8230; and &#8230; change &#8220;area&#8221; to &#8220;tr-td-a-svg&#8211;polygon&#8221; (&#8220;\/area&#8221; to &#8220;\/polygon-\/svg-\/a-\/td-\/tr&#8221;) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1993,452,576,578,652,1992,745,800,997,1226,1238,1319],"class_list":["post-24615","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-browse","tag-form","tag-html","tag-html5","tag-javascript","tag-legend","tag-map","tag-mobilefish","tag-programming","tag-svg","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24615"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=24615"}],"version-history":[{"count":25,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24615\/revisions"}],"predecessor-version":[{"id":24640,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24615\/revisions\/24640"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}