<div class="data">
  
</div>

<div class="imagemap">
  <div class="image-overlay"></div>
  <div class="image-wrapper">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544303/bwing.jpg" />
    </div>
</div>

.image-overlay {
  position: relative;
}

.overlay-image {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: .5;
}

.overlay-image:hover {
  opacity: .8;
}

.data {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  padding: 40px;
  background: #ccc;
}

const overlay = document.querySelector('.image-overlay');
const dataField = document.querySelector('.data');

const points = [
  {
    x: '320px',
    y: '50px',
    data: 'Extended Cockpit'
  },
  {
    x: '460px',
    y: '210px',
    data: 'Targeting Lasers'
  },
  {
    x: '250px',
    y: '350px',
    data: 'Sheild Generators'
  },
  {
    x: '3890px',
    y: '550px',
    data: 'Sensor Array'
  }
];

points.forEach((point) => {
  let img = document.createElement('img'); 
  img.style.left = point.x;
  img.style.top = point.y;
  img.title = point.data;
  img.className= 'overlay-image';
  img.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544303/Target_Logo.svg"
  overlay.appendChild(img);
  img.data = point.data;
  img.addEventListener('mouseenter', handleMouseEnter);
  img.addEventListener('mouseleave', handleMouseLeave);
});

function handleMouseEnter(event) {
  dataField.innerHTML = event.currentTarget.data;
}


function handleMouseLeave(event) {
  dataField.innerHTML = ' ';
}