How to set different background depending on hotspot hover

Issue

How would like to modify this codepen https://codepen.io/varcharles/pen/qNQpRv When hovering a red dot the box on right should change is background related on which hotspot is selected. So, four different images related to 4 different hotspots.

const dataField = document.querySelector('.data');

const points = [
  {
    x: '30px',
    y: '50px',
data: 'Targeting Lasers',
    
  },
  {
    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 = ' ';
}

Can someone please help me? Thank you a lot for your attention

Solution

You can just add more data and assign each data object to the images. The following will change the background image when hovering the hotspot.

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

const points = [
  {
    x: '320px',
    y: '50px',
    data: {
      title: 'Extended Cockpit',
      image: "url('https://dummyimage.com/320x320/ff0000/fff')",
    }
  },
  {
    x: '460px',
    y: '210px',
    data: {
      title: 'Targeting Lasers',
      image: "url('https://dummyimage.com/320x320/00ff00/fff')",
    }
  },
  {
    x: '250px',
    y: '350px',
    data: {
      title: 'Sheild Generators',
      image: "url('https://dummyimage.com/320x320/0000ff/fff')",
    }  
  },
  {
    x: '3890px',
    y: '550px',
    data: {
      title: 'Sensor Array',
      image: "url('https://dummyimage.com/320x320/000000/fff')",
    }
  }
];

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

function handleMouseEnter(event) {
  // Set title and background image based on data set in target
  dataField.innerHTML = event.currentTarget.data.title;
  dataField.style.backgroundImage = event.currentTarget.data.image;
}

function handleMouseLeave(event) {
  // Reset
  dataField.innerHTML = ' ';
  dataField.style.backgroundImage = 'none';
}

Answered By - Cyclonecode