Page History

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>      
 
 
   <style>
        option:disabled { opacity: 0.4; }
    </style>
 
  <script>
		$(document).ready(function(){
 
      var plotsBaseURL='https://confluence.ecmwf.int/download/attachments/3737537919373753799/'
 
      var periods = [{key:'1940-2022', label:'1940-2022'}, {key:'1970-2022', label:'1970-2022'}]
 
        // populate selects
        var populate = function(vals,id,available){
            $.each(vals, function(){
                $('<option/>', {'value': this.key,'text': this.label}).appendTo('#'+id);
            });
        }
 
        populate(periods,'sel_period');
 
      // populate months
      function getMonthName(monthNumber) {
      const date = new Date(2001, monthNumber - 1, 1);
      return date.toLocaleString('en-GB', { month: 'long' });
      }
 
      for (var i = 1; i < 13; i++) {
		$('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_month');
      }
 
      //update functions
      var updateImage = function(){
        var period = $('#sel_period').val();
        var month = $('#sel_month').val();
		    var str_month = String(month).padStart(2, '0');
 
 
        imgfname=period+'_t2m_ENSOneg_tsum_month'+str_month+'.png';      
        $('#t2m_nina').attr('src',plotsBaseURL+imgfname);
 
        imgfname=period+'_t2m_ENSOpos_tsum_month'+str_month+'.png';      
        $('#t2m_nino').attr('src',plotsBaseURL+imgfname);        
 
        imgfname=period+'_tp_ENSOneg_tsum_month'+str_month+'.png';      
        $('#prec_nina').attr('src',plotsBaseURL+imgfname);
 
        imgfname=period+'_tp_ENSOpos_tsum_month'+str_month+'.png';      
        $('#prec_nino').attr('src',plotsBaseURL+imgfname);
 
 
      }
 
      updateImage();
 
      $('#selectors select').on('change',function(e){
        updateImage();
      })
 
    })
 
    </script>      
 
	<div id="selectors">
    <label for="sel_month">Month: </label><select id="sel_month" ></select>
    <label for="sel_period">Reference period: </label><select id="sel_period"></select>
    <br>
    </div>
 
    <img id="t2m_nina" width="50%"/><img id="t2m_nino" width="50%"/><br/>
	  <img id="prec_nina" width="50%"/><img id="prec_nino" width="50%"/><br/>