Files for generating HTML to go with Coastal Climate Science — Activities and Experiments (CCSAE) explainers.
The process of developing this <div> is as follows:
<img> <map> and 14 <area> elements where the buttons link to the URIs.As a secondary process:
onmouseover and onmouseout that swap the images in and out for 14 images that have the additional letters ‘a’ – ‘n’ in their filenames — each of which has a transparent background for one of the buttons, so the <img> background color can show through.In the third version, the files with 740x850 in the filenames seem to have trouble being served to browsers with AdBlockPlus — apparently certain (image) files with image sizes in the filenames are blocked.
However, that was not my problem… in my case, using Arc with uBlock Origin, I had to whitelist sites.google.com to get the embedded <div> to load.
Therefore, I added back in *780x850.png to images so there are now two copies of each .PNG file with different filenames.
In order to allow for easier adjustments to the diagram, version 0.4 is a p5.js sketch available at https://dcpetty.dev/p5js/ccsae/ (in the p5js repo) based on this map and this sheet and editable on this sketch.
This is a Draft, with more work needed. The original approach using an <img> <map> is still extant.
The fifth version of https://dcpetty.dev/ccsae/ccsae.html using an <img> <map> was updated to include images that reflect the latest from https://sites.google.com/view/coastal-climate-science/ and that now include 16 explainers.
The generated <div> suitable for embedding in a Google site can be found in raw form here and is shown below:
<!-- https://dcpetty.dev/ccsae/ v0.5 -->
<div>
<map name="ccsae-map">
<area shape="rect" coords="275,090,455,130" href="https://sites.google.com/view/coastal-climate-science/explainers/increasing-co2" alt="increasing co2 in the atmosphere"
onmouseover="light('a')" onmouseout="dark()" />
<area shape="rect" coords="385,195,530,225" href="https://sites.google.com/view/coastal-climate-science/explainers/warmer-air" alt="warmer air and the greenhouse effect"
onmouseover="light('b')" onmouseout="dark()" />
<area shape="rect" coords="120,255,220,305" href="https://sites.google.com/view/coastal-climate-science/explainers/ocean-acidification" alt="ocean acidification"
onmouseover="light('c')" onmouseout="dark()" />
<area shape="rect" coords="245,280,365,320" href="https://sites.google.com/view/coastal-climate-science/explainers/warmer-ocean" alt="warmer ocean water"
onmouseover="light('d')" onmouseout="dark()" />
<area shape="rect" coords="440,275,535,335" href="https://sites.google.com/view/coastal-climate-science/explainers/more-water-vapor" alt="more water vapor in the air"
onmouseover="light('e')" onmouseout="dark()" />
<area shape="rect" coords="555,280,675,320" href="https://sites.google.com/view/coastal-climate-science/explainers/melting-glaciers" alt="melting glaciers and ice sheets"
onmouseover="light('f')" onmouseout="dark()" />
<area shape="rect" coords="585,375,705,415" href="https://sites.google.com/view/coastal-climate-science/explainers/water-salinity" alt="regional changes in water salinity"
onmouseover="light('g')" onmouseout="dark()" />
<area shape="rect" coords="460,435,540,490" href="https://sites.google.com/view/coastal-climate-science/explainers/More-clouds " alt="more clouds and turbulence"
onmouseover="light('h')" onmouseout="dark()" />
<area shape="rect" coords="375,475,450,515" href="https://sites.google.com/view/coastal-climate-science/explainers/sea-level" alt="rising sea level"
onmouseover="light('i')" onmouseout="dark()" />
<area shape="rect" coords="550,470,650,520" href="https://sites.google.com/view/coastal-climate-science/explainers/water-density" alt="changes in water density"
onmouseover="light('j')" onmouseout="dark()" />
<area shape="rect" coords="200,545,265,615" href="https://sites.google.com/view/coastal-climate-science/explainers/less-dissolved-oxygen" alt="less dissolved oxygen in water"
onmouseover="light('k')" onmouseout="dark()" />
<area shape="rect" coords="285,560,370,610" href="https://sites.google.com/view/coastal-climate-science/explainers/algal-blooms" alt="harmful algal blooms (habs)"
onmouseover="light('l')" onmouseout="dark()" />
<area shape="rect" coords="450,540,575,600" href="https://sites.google.com/view/coastal-climate-science/explainers/extreme-weather" alt="extreme and changing weather"
onmouseover="light('m')" onmouseout="dark()" />
<area shape="rect" coords="560,615,660,675" href="https://sites.google.com/view/coastal-climate-science/explainers/ocean-circulation" alt="changes to atlantic ocean circulation"
onmouseover="light('n')" onmouseout="dark()" />
<area shape="rect" coords="280,755,380,810" href="https://sites.google.com/view/coastal-climate-science/explainers/harm-to-marine" alt="harm to marine life"
onmouseover="light('o')" onmouseout="dark()" />
<area shape="rect" coords="460,785,600,835" href="https://sites.google.com/view/coastal-climate-science/explainers/harm-to-human" alt="harm to human and terrestrial life"
onmouseover="light('p')" onmouseout="dark()" />
</map>
<img id="ccsae" style="display: block; margin: auto; background-color: gold;"
usemap="#ccsae-map" src="https://dcpetty.dev/ccsae/images/fseicdace.png" alt="ccsae" />
<script>
const uri = `https://dcpetty.dev/ccsae/images/fseicdace`, ext = `.png`;
const img = document.querySelector(`img#ccsae`);
// console.log(img);
function light(id) { img.src = `${uri}-${id}${ext}`; }
function dark() { img.src = `${uri}${ext}`; }
</script>
</div>
🔗 permalink and 🔩 repository for this page.