jungle-map

layering images

by grassed

HTML

<div class="mask">
  <div class="header">
    <h1>The Jungle</h1>
  </div>
  <div class="colleft">
    <div class="col1">
      <div class="container">


      </div>

      <!-- select background image -->
      <div>
        <select id="ImgList">
    <option value="http://www.jhini.in/test/maps/images/background/aerial_1961.jpg"
>1961</option>
    <option value="http://www.jhini.in/test/maps/images/background/aerial_1965.jpg"
>1965</option>
    <option value="http://www.jhini.in/test/maps/images/background/aerial_1969.jpg"
>1969</option>
</select>
<!-- end select background image -->
      
      
      </div>
      <!-- select foreground overlay -->
      
      <div class="b">
        <a class="toggle button2" id="button1" href="#e1">2015</a>
        <a class="toggle button2" id="button2" href="#e2">2017</a>
      </div>


    </div>
    <div class="col2">
      <div class="map">
        <div class="container imgbox">
          
          <img class="imgA2 center-fit" src="http://www.jhini.in/test/maps/2012_ProposedStructural.png">
          <img class="imgB1 center-fit toggle-content" id="e1" src="http://www.jhini.in/test/maps/2015.png">
          <img class="imgC1 center-fit toggle-content" id="e2" src="http://www.jhini.in/test/maps/2017.png">
        </div>
      </div>
    </div>
  </div>

</div>

CSS

.mask {
  position: relative;
  /*overflow: hidden; */
  margin: 0px auto;
  width: 100%;
}

.header {
  float: left;
  width: 100%;
}

.colleft {
  position: relative;
  width: 100%;
  right: 29%;
}

.col1 {
  position: relative;
  overflow: hidden;
  float: left;
  width: 27%;
  left: 101%;
}

.col2 {
  position: relative;
  /*overflow: hidden;*/
  float: left;
  width: 69%;
  left: 3%;
}

.footer {
  float: left;
  width: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  font-size: 90%;
}

* {
  margin: 0;
  padding: 0;
}

.imgbox {
  display: grid;
  height: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

.button2 {
  border: 1px solid #444;
  background: gray;
  float: left;
  margin: 3px;
  padding: 3px;
}

.myClass {
  background: yellow;
}

.map {
  padding: 50px;
}

.b {
  padding: 10px;
}

.container {
  position: relative;
  max-height: 100%;
}

.imgA1 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.imgA2 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.imgB1 {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  z-index: 3;
}

.imgC1 {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  z-index: 4;
}

JavaScript

// toggle element
var show = function(elem) {
  elem.style.display = 'block';
};
var hide = function(elem) {
  elem.style.display = 'none';
};
var toggle = function(elem) {
  // If the element is visible, hide it
  if (window.getComputedStyle(elem).display === 'block') {
    hide(elem);
    return;
  }
  // Otherwise, show it
  show(elem);
};
// Listen for click events
document.addEventListener('click', function(event) {
  // Make sure clicked element is our toggle
  if (!event.target.classList.contains('toggle')) return;
  // Prevent default link behavior
  event.preventDefault();
  // Get the content
  var content = document.querySelector(event.target.hash);
  if (!content) return;
  // Toggle the content
  toggle(content);
}, false);
// end toggle element

//change button color
$(function() {
  $('.button2').on('click', function() {
    $(this).toggleClass('myClass');
  });
});


// dropdown
function setImg() {
  var img = document.getElementById("background_image");
  img.src = this.value;
  return false;
}
document.getElementById("ImgList").onchange = setImg;