buttons and rat images

index.html

@@ -14,14 +14,14 @@
   <div class="pagelayout">
     <div class="pinkborder sidebar">
       <div>
-        <img class="sidebar-image" alt="seven rats on two foot by two foot section of leather couch, walled in together by cardboard barricades on the left and right. Five rats are cuddling in back-right corner. One rat is laying toward the front-left corner, staring outward away from couch. One Rat is standing upright at front-right corner, feet facing the back of couch with torso turned to look outward from couch." src="/assets/img/rattos/test.webp"></img>
+        <img id="rattos-image" class="sidebar-image" alt="seven rats on two foot by two foot section of leather couch, walled in together by cardboard barricades on the left and right. Five rats are cuddling in back-right corner. One rat is laying toward the front-left corner, staring outward away from couch. One Rat is standing upright at front-right corner, feet facing the back of couch with torso turned to look outward from couch." src="/assets/img/rattos/mischief_of_rats_hanging_out_on_couch.webp"></img>
+        <script src="/style/js/rattos.js"></script>
         <p class="sidebar-caption">Please enjoy a picture of my sons :)</p>
         <a href="https://git.pogmom.me/pogmommy/pogmomme/src/branch/main/assets/img/webring/pogmommy/">
           <img title="Want to link back here? Feel free to use one of my buttons! (click to view folder)" class="sidebar-webring" alt="Pogmommy website icon" src="/assets/img/webring/pogmommy/1056x372.webp"></img>
         </a>
-<!--        <div id='random-button'>
-          <img class="sidebar-webring" alt="Pogmommy website icon" src="/assets/img/webring/pogmommy/1056x372.webp"></img>
-        </div>-->
+        <div id='random-buttons'>
+        </div>
       </div>
       <div id="nowplaying-placeholder"></div>
       <hr>
@@ -32,14 +32,6 @@
       <hr>
         <h3 class="sidebar-caption">Webrings</h3>
         <div class="webrings">
-          <div class="sidebar-webring">
-            <script src="https://transring.neocities.org/ring.js"></script>
-          </div>
-          <link rel="stylesheet" href="https://teethinvitro.neocities.org/webring/linuxring/script/onionring.css">
-          <div class="sidebar-webring" id='linuxring'>
-            <script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-variables.js"></script>
-            <script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-widget.js"></script>
-          </div>
           <div class="sidebar-webring pinkborder">
             <a href="https://baccyflap.com/noai" target="_blank">No AI webring</a><br>
             <a href="https://baccyflap.com/noai/?prv&s=mom" target="_top" title="previous">«</a>
@@ -62,6 +54,14 @@
             <script src="https://jeith.com/assets/webring/wii-ring.js"></script>
             <wii-ring site="https://pogmom.me" variant="family-edition-blue"></wii-ring>
           </div>
+          <div class="sidebar-webring">
+            <script src="https://transring.neocities.org/ring.js"></script>
+          </div>
+          <link rel="stylesheet" href="https://teethinvitro.neocities.org/webring/linuxring/script/onionring.css">
+          <div class="sidebar-webring" id='linuxring'>
+            <script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-variables.js"></script>
+            <script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-widget.js"></script>
+          </div>
         </div>
       <hr>
       <a class="mastodon-feed" href="https://masto.pogmom.me/@pogmommy" data-toot-limit="3" data-toot-account-id="110533482420174821" data-exclude-replies="true" data-exclude-reblogs="true"><p id="emfed-placeholder" class="sidebar-caption">Enable javascript to load mastodon posts</p></a>
@@ -110,5 +110,6 @@
   </div>
 <!--  <div id="footer"><p>Click <a href="https://pogmom.me/links.html">here</a> or enable javascript to view my social links</p></div>
   <script src="/style/js/views.js"></script>-->
+  <script src="/style/js/buttons.js"></script>
 </body>
 </html>

style/css/style.css

@@ -44,6 +44,13 @@ body {
 .sidebar-caption {
   text-align: center;
 }
+#random-buttons > img {
+  width: 25%;
+  margin: 1vmax auto;
+  display: block;
+  border-radius: 4px;
+  text-align: center;
+}
 p.sidebar-caption,h3.sidebar-caption {
   margin: 1vmax auto;
 }

style/js/buttons.js

@@ -0,0 +1,15 @@
+var imgArray = ['anarchy_now','gender_crime','linux_now','maintained_by_a_queer_folk','pastel_goth','powered_by_debian','sex_no','this_machine_kills_fascists','trans','trans_gender','trans_rights_now','trans_your_gender','web_interoperability_pledge'];
+var basePath="/assets/img/buttons/";
+var fileFormat=".webp";
+
+function imgRandom() {
+    for (var i = 0; i < 3; i++) {
+        var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
+        var image = new Image();
+        image.src = basePath+rand+fileFormat;
+        image.alt = rand.replaceAll('_',' ');
+        document.getElementById('random-buttons').appendChild(image);
+    }
+}
+
+imgRandom();

style/js/rattos.js

@@ -0,0 +1,11 @@
+var imgArray = ['four_rats_piled_in_hammock', 'sleeping_rat_wrapped_in_blanket', 'black_and_white_rat_curled_up_in_blue_hammock', 'rat_in_cat_tree_looking_at_camera', 'three_rats_in_a_tube_hammock', 'black_and_white_rat_curled_up_in_blue_hammock_2', 'rat_in_plush_cave', 'three_sleeping_rats_cuddling_on_couch', 'black_and_white_rat_curled_up_in_blue_hammock_3', 'rat_sitting_on_bed_eating_tiny_pancake', 'two_rats_in_hammock_one_yawning', 'black_and_white_rat_in_blue_hammock', 'rat_standing_at_foot_of_bed', 'two_rats_in_hollowed_out_pillow_cuddling', 'mischief_of_rats_hanging_out_on_couch', 'rat_standing_poking_head_through_steps_of_cat_tree', 'two_rats_inside_cat_tree_dramatically_wrestling', 'fat_rat_walking_around', 'rats_in_hammock_grabbing_cage_bars'];
+var basePath="/assets/img/rattos/";
+var fileFormat=".webp";
+
+function imgRandom() {
+    var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
+    document.getElementById('rattos-image').src = basePath+rand+fileFormat;
+    document.getElementById('rattos-image').alt = rand.replaceAll('_',' ');
+}
+
+imgRandom();