Indieweb Webring Button

Inspired by The Online Webring, I made an Indieweb webring button that has mapped clickable regions for previous, next and webring links. <div style="margin-top: 20px;"> <map name="indie8831"> <area shape="rect" coords="38,0,88,15" href="https://xn--sr8hvo.ws/previous" alt="Previous"> <area shape="rect" coords="38,16,88,31" href="https://xn--sr8hvo.ws/next" alt="Next"> <area shape="rect" coords="0,0,38,31" href="https://xn--sr8hvo.ws" alt="IndieWeb"> </map> <img src="https://scientiac.space/assets/indieweb.png" usemap="#indie8831" width="88" height="31" alt="IndieWeb Webring" style="display: block; margin: 0 auto; width: 88px; height: 31px; max-width: none; border-radius: 0 !important; image-rendering: pixelated; border: none;"> </div> But, I had to use this on my footer which basically hides the links but still make my site valid to the webring bot: <div style="font-size: 0; opacity: 0; height: 0; width: 0; overflow: hidden;"> <a href="https://xn--sr8hvo.ws/previous"…