The One Ring: a site rotation for Legendarium sites

The Code

Please place the code on the index or joined pages of your website; you don't have to wait to be approved for it to work, if you wish to add it immediately to save time!

Choose a top button from one of the following and save to your webspace:

Place one of these two codes on your page, and replace YOUR_CHOICE_OF_BUTTON_HERE in the snippet with the filename of your chosen button.

Iframes

<div class="oneringrotation" style="line-height: 0px; border: none; width: 88px; height: 66px; overflow: hidden; text-align: center;"><a href="https://middle-earth.org/ring/" rel="noopener noreferrer" target="_blank" title="The One Ring button rotation"><img src="YOUR_CHOICE_OF_BUTTON_HERE" style="border: 0px; width: 88px;"></a><br> <iframe src="https://middle-earth.org/ring/rotate.php" style="margin: 0px; padding: 0px; border: none; width: 88px;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe> </div>

The following should display:


Embed

<div class="oneringrotation" style="line-height: 0px; border: none; width: 88px; height: 66px; overflow: hidden; text-align: center;"><a href="https://middle-earth.org/ring/" rel="noopener noreferrer" target="_blank" title="The One Ring button rotation"><img src="YOUR_CHOICE_OF_BUTTON_HERE" style="border: 0px; width: 88px;"></a><br>
<object data="https://middle-earth.org/ring/rotate.php" width="88" height="31" scrolling="no" marginwidth="0" marginheight="0" frameborder="0">
<embed src="https://middle-earth.org/ring/rotate.php" width="88" height="31" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="overflow: none;"></embed>
<span title="Error: Embedded data could not be displayed." style="cursor:help; border-bottom: 1px dotted #ccc;">!!!</span> </object>
</div>

The following should display:


!!!

To style or position the code, just use the #oneringrotation selector in your own CSS file to edit to your heart's delight. For example, to center the code, use the following in your CSS:

.oneringrotation {
display: block;
margin-right: auto;
margin-left: auto;
}

Feel free to contact me with any troubles you might have with the code!