Widget:PhotoTabs

<img id="pic" src="">

<script>

 var pane = document.getElementById("test");
 var series = [];
 var obj = {};
 obj["name"] = "Normal";
 obj["source"] = "https://wiki.urealms.com/images/f/fb/Yumi_RadioactiveK.png";
 series.push(obj);

 var obj = {};
 obj["name"] = "Icon";
 obj["source"] = "https://wiki.urealms.com/images/9/94/Yumi_Icon.png";
 series.push(obj);

 var obj = {};
 obj["name"] = "Puppet Pals";
 obj["source"] = "https://wiki.urealms.com/images/f/fe/Yumi_BOT_Puppet.png";
 series.push(obj);

 var obj = {};
 obj["name"] = "Testing 1";
 obj["source"] = "https://wiki.urealms.com/images/7/7f/Bumbley_RadioactiveK.png";
 series.push(obj);

 var obj = {};
 obj["name"] = "Testing 2";
 obj["source"] = "https://wiki.urealms.com/images/8/85/Bumbley_Icon.png";
 series.push(obj);

 var obj = {};
 obj["name"] = "Testing 3";
 obj["source"] = "https://wiki.urealms.com/images/5/5f/Bumbley_BOT_Puppet.png";
 series.push(obj);

 var count = 0;

 for (i = 0; i < series.length; i++) {

   count = count + series[i].name.length;
   if (count > 25) {
     count = 0;

pane.insertAdjacentHTML('beforeend', '

');

   }

   pane.insertAdjacentHTML('beforeend', '<a class="button" onclick="change(id)" id="' + series[i].name + '" ">' + series[i].name + '</a>');

   if (i == 0) {
     document.getElementById("pic").src = series[0].source;
     document.getElementById(series[0].name).style.backgroundColor = "#212121";
   }
 }

 function change(id) {
   for (i = 0; i < series.length; i++) {
     document.getElementById(series[i].name).style.backgroundColor = "#943e00"; //saddle

   }
   document.getElementById(id).style.backgroundColor = "#212121"; //gray
   for (i = 0; i < series.length; i++) {
     if (series[i].name == id) {
       document.getElementById("pic").src = series[i].source;

     };
   }

 }

</script>