How to set different background depending on hotspot hover

Question

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

Answer 1

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;
  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';
}