Periodic Table Image Map Primer Tutorial
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’ve referenced in the past, as well as …
- the use of an image map … whose image we thank University of Hawaiʻi at Mānoa | Take Me To Manoa for … especially regarding their creation helped out by the wonderful mobilefish generated HTML map element creation helper … but maybe less obvious is …
- area element href attributes totally ignored in favour of onmouseover and onclick event logics used … and regarding onmouseover logic …
- use of CSS mix-blend-mode:multiply; here …
<iframe frameborder=0 title='Thanks to https://www.chemicalelements.com' src='' srcdoc='' id=myif name=myif style="mix-blend-mode:multiply;background-color:white;z-index:90;position:absolute;visibility:hidden;top:0px;left:300px;width:500px;height:500px;"></iframe>
… seemed to “seal the deal” while it’s use here within this Javascript …
function omo(ao) {
if (('' + ao.alt) != lastalt && ('' + ao.alt).trim() != '') {
lastalt=('' + ao.alt);
if (iwin) {
if (!iwin.closed) {
iwin.close();
iwin=null;
}
}
document.getElementById('myif').src='';
document.getElementById('myif').style.visibility='visible';
if (5 == 5) {
document.getElementById('myif').srcdoc='<html><body style="mix-blend-mode:multiply;"><img alt="' + ('' + ao.getAttribute('data-href')).replace('#','') + '" style="mix-blend-mode:multiply;" src=' + '//www.chemicalelements.com/bohr/b' + ('0000' + ao.alt).slice(-4) + '.gif' + '></img></body><html>';
setTimeout(xcloseit, 10000);
} else {
iwin=window.open('//www.chemicalelements.com/bohr/b' + ('0000' + ao.alt).slice(-4) + '.gif', 'myif', 'top=0,left=300,width=300,height=300');
//iwin.document.title=('' + ao.getAttribute('data-href')).replace('#','');
setTimeout(closeit, 10000);
}
}
}
… less so, in making the white pixel background of chemicalelement.com‘s useful element diagrams, thanks, like …
… sometimes partially overlaying the Periodic Table image map, become transparently pixellated, just using CSS … thanks to Is it possible to use CSS to make white pixels in an image transparent or close to it? for the heads up this might work
We hope you flex your “chemical muscle” trying our first draft Periodic Table Image Map web application below …
If this was interesting you may be interested in this too.
