Image map for the top image on:
https://archives.somnolescent.net/web/mari_v2/junk/hypercard/
artbitsmap.html – the <map> markupinject-artbitsmap.js – script to inject the map into the page for testinginject-artbitsmap.js into the console.The script will:
img[src="artbits.png"]<map name="artbitsmap">usemap="#artbitsmap"| <img src="artbits.png" alt="The front of the Art Bits stack" usemap="#artbitsmap" title="The front of the Art Bits stack" class="centerimg"> | |
| <map name="artbitsmap"> | |
| <area shape="rect" coords="20,114,118,141" href="#beasts" alt="Beasts"> | |
| <area shape="rect" coords="20,144,131,170" href="#buildings" alt="Buildings"> | |
| <area shape="rect" coords="20,175,230,203" href="#media" alt="Communication and media"> | |
| <area shape="rect" coords="20,206,210,234" href="#hypercard" alt="HyperCard miscellany"> | |
| <area shape="rect" coords="20,237,135,264" href="#icons" alt="Icon ideas"> | |
| <area shape="rect" coords="20,268,200,295" href="#macintosh" alt="Macintosh miscellany"> | |
| <area shape="rect" coords="255,114,420,141" href="#science" alt="Nature and science"> | |
| <area shape="rect" coords="255,145,396,171" href="#misc" alt="Odds and ends"> | |
| <area shape="rect" coords="255,176,356,203" href="#people" alt="People"> | |
| <area shape="rect" coords="255,206,407,234" href="#small" alt="Small treasures"> | |
| <area shape="rect" coords="255,237,402,264" href="#transportation" alt="Transportation"> | |
| </map> |
| (() => { | |
| const MAP_NAME = 'artbitsmap'; | |
| const IMAGE_SELECTOR = 'img[src="artbits.png"]'; | |
| const mapHTML = ` | |
| <map name="artbitsmap" data-injected="true"> | |
| <area shape="rect" coords="20,114,118,141" href="#beasts" alt="Beasts"> | |
| <area shape="rect" coords="20,144,131,170" href="#buildings" alt="Buildings"> | |
| <area shape="rect" coords="20,175,230,203" href="#media" alt="Communication and media"> | |
| <area shape="rect" coords="20,206,210,234" href="#hypercard" alt="HyperCard miscellany"> | |
| <area shape="rect" coords="20,237,135,264" href="#icons" alt="Icon ideas"> | |
| <area shape="rect" coords="20,268,200,295" href="#macintosh" alt="Macintosh miscellany"> | |
| <area shape="rect" coords="255,114,420,141" href="#science" alt="Nature and science"> | |
| <area shape="rect" coords="255,145,396,171" href="#misc" alt="Odds and ends"> | |
| <area shape="rect" coords="255,176,356,203" href="#people" alt="People"> | |
| <area shape="rect" coords="255,206,407,234" href="#small" alt="Small treasures"> | |
| <area shape="rect" coords="255,237,402,264" href="#transportation" alt="Transportation"> | |
| </map>`.trim(); | |
| const img = document.querySelector(IMAGE_SELECTOR); | |
| if (!img) { | |
| console.error(`Image not found: ${IMAGE_SELECTOR}`); | |
| return; | |
| } | |
| // remove previously injected map | |
| document | |
| .querySelector(`map[name="${MAP_NAME}"][data-injected="true"]`) | |
| ?.remove(); | |
| const container = document.createElement('div'); | |
| container.innerHTML = mapHTML; | |
| const map = container.firstElementChild; | |
| document.body.appendChild(map); | |
| img.setAttribute('usemap', `#${MAP_NAME}`); | |
| console.log('artbits image map injected'); | |
| })(); |