Widget:PhotoTabs

<img id="pic" align="middle"> <style>

 .button {
   color: white;
   border-style: solid;
   border-width: 1px;
   border-color: #444444;
   background-color: #943e00;
   font-family: "Arial";
   letter-spacing: .5px;
   padding: 5px;
   text-align: center;
 }
 
 .p {
   margin: 11px;
 }

</style>

<script>

 var pane = document.getElementById("tabs");
 var series = [];

 var obj = {};
 obj["name"] = "";
 obj["source"] = "";
 obj["width"] = "";
 obj["height"] = "";
 series.push(obj);

 var count = 0;

 for (var 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("pic").width = series[0].width;
     document.getElementById("pic").height = series[0].height;

     document.getElementById(series[0].name).style.backgroundColor = "#212121";
   }
 }

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

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

 }

</script>