{"id":69211,"date":"2025-07-29T03:01:00","date_gmt":"2025-07-28T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69211"},"modified":"2025-07-30T07:27:09","modified_gmt":"2025-07-29T21:27:09","slug":"periodic-table-image-map-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/periodic-table-image-map-primer-tutorial\/","title":{"rendered":"Periodic Table Image Map Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_drill.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Periodic Table Image Map Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_drilling.gif\" title=\"Periodic Table Image Map Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Periodic Table Image Map Primer Tutorial<\/p><\/div>\n<p>We have a new web application with some familiar themes, but some new features, today.  Familiar, to regular readers, will be the subject matter of the <a target=\"_blank\" title='Periodic Table information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Periodic_table' rel=\"noopener\">Periodic Table<\/a>, which we&#8217;ve referenced in the past, as well as &#8230;<\/p>\n<ul>\n<li>the use of an image map &#8230; whose image we thank <a target=\"_blank\" title='https:\/\/manoa.hawaii.edu\/exploringourfluidearth\/sites\/default\/files\/M2U2-Fig2.12-Nonmental.png' href='\/\/manoa.hawaii.edu\/exploringourfluidearth\/sites\/default\/files\/M2U2-Fig2.12-Nonmental.png' rel=\"noopener\">University of Hawai\u02bbi at M\u0101noa | Take Me To Manoa<\/a> for &#8230; especially regarding their creation helped out by the wonderful <a target=\"_blank\" title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">mobilefish<\/a> generated HTML <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> element creation helper &#8230; but maybe less obvious is &#8230;<\/li>\n<li>area element <i>href<\/i> attributes totally ignored in favour of <i>onmouseover<\/i> and <i>onclick<\/i> event logics used &#8230; and regarding <i>onmouseover<\/i> logic &#8230;<\/li>\n<li>use of CSS <font color=blue><i><a target=\"_blank\" title='CSS mix-blend-mode information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_mix-blend-mode.php' rel=\"noopener\">mix-blend-mode<\/a>:multiply;<\/i><\/font> here &#8230;<br \/>\n<code><br \/>\n&lt;iframe frameborder=0 title='Thanks to https:\/\/www.chemicalelements.com' src='' srcdoc='' id=myif name=myif style=\"<font color=blue><i>mix-blend-mode:multiply;<\/i><\/font>background-color:white;z-index:90;position:absolute;visibility:hidden;top:0px;left:300px;width:500px;height:500px;\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; seemed to &#8220;seal the deal&#8221; while it&#8217;s use here within this Javascript &#8230;<br \/>\n<code><br \/>\n  function omo(ao) {<br \/>\n    if (('' + ao.alt) != lastalt && ('' + ao.alt).trim() != '') {<br \/>\n    lastalt=('' + ao.alt);<br \/>\n    if (iwin) {<br \/>\n      if (!iwin.closed) {<br \/>\n        iwin.close();<br \/>\n        iwin=null;<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById('myif').src='';<br \/>\n    document.getElementById('myif').style.visibility='visible';<br \/>\n    if (5 == 5) {<br \/>\n    document.getElementById('myif').srcdoc='&lt;html&gt;&lt;body style=\"<font color=blue><i>mix-blend-mode:multiply;<\/i><\/font>\"&gt;&lt;img alt=\"' + ('' + ao.getAttribute('data-href')).replace('#','') + '\" style=\"<font color=blue><i>mix-blend-mode:multiply;<\/i><\/font>\" src=' + '\/\/www.chemicalelements.com\/bohr\/b' + ('0000' + ao.alt).slice(-4) + '.gif' + '&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;html&gt;';<br \/>\n    setTimeout(xcloseit, 10000);<br \/>\n    } else {<br \/>\n    iwin=window.open('\/\/www.chemicalelements.com\/bohr\/b' + ('0000' + ao.alt).slice(-4) + '.gif', 'myif', 'top=0,left=300,width=300,height=300');<br \/>\n    \/\/iwin.document.title=('' + ao.getAttribute('data-href')).replace('#','');<br \/>\n    setTimeout(closeit, 10000);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; less so, in making the white pixel background of <a target=\"_blank\" title='chemicalelement.com' rel=\"noopener\" href='\/\/chemicalelement.com'>chemicalelement.com<\/a>&#8216;s useful element diagrams, thanks, like &#8230; <\/p>\n<p><img src='\/\/www.chemicalelements.com\/bohr\/b0002.gif'><\/img><\/p>\n<p> &#8230; sometimes partially overlaying the Periodic Table image map, become transparently pixellated, just using CSS &#8230; thanks to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/50365898\/is-it-possible-to-use-css-to-make-white-pixels-in-an-image-transparent-or-close' title='Is it possible to use CSS to make white pixels in an image transparent or close to it?' rel=\"noopener\">Is it possible to use CSS to make white pixels in an image transparent or close to it?<\/a> for the heads up this might work<\/li>\n<\/ul>\n<p>We hope you flex your &#8220;chemical muscle&#8221; trying our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_drill.html_GETME\" rel=\"noopener\">first draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_drill.html\" rel=\"noopener\">Periodic Table Image Map<\/a> web application below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/periodic_table_drill.html\" style=\"mix-blend-mode:multiply;zoom:0.5;width:100%;height:900px;\"><\/iframe><\/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='#d69211' onclick='var dv=document.getElementById(\"d69211\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image-map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69211' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have a new web application with some familiar themes, but some new features, today. Familiar, to regular readers, will be the subject matter of the Periodic Table, which we&#8217;ve referenced in the past, as well as &#8230; the use &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/periodic-table-image-map-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":[99,203,281,400,576,592,5244,652,745,5243,800,861,871,2805,997,1100,1319,1431],"class_list":["post-69211","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-area","tag-chemistry","tag-css","tag-event","tag-html","tag-image-map","tag-ime","tag-javascript","tag-map","tag-mix-blend-mode","tag-mobilefish","tag-onclick","tag-onmouseover","tag-periodic-table","tag-programming","tag-science","tag-tutorial","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69211"}],"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=69211"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69211\/revisions"}],"predecessor-version":[{"id":69239,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69211\/revisions\/69239"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}