Indieweb Webring Button

2026-05-08POSSE

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" rel="prev">Previous</a>
  <a href="https://xn--sr8hvo.ws/next" rel="next">Next</a>
</div>

Please tell me if that should not be done. Also, If you want to make changes to it, I made it as an SVG using Inkscape.

Indieweb Webring Button

Webmentions