popup image with no html code only css and javascript

Question

So I have a 360 Virtual tour using pannellum, I have this hotspot code desing in css

.custom-hotspot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: rgb(253, 253, 255);
}

I would like that when u click the hotspot popup an image but without using html tags only css and javascript, I try using this

.custom-hotspot:hover {
  content: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg); /* no need for qoutes */
  width: 100px;
  height: 100px;
  border-radius: 20%;
}

but this is not a popup image and its not the same. Does anyone know a solution for this?

Answer 1

If by popup you mean separate browser window then no..

But if you want to display the image next to the cursor on element hover you can display it as the background in a pseudo element.

.custom-hotspot:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 20%;
  background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}

Make sure that the parent element has a defined position property like position: relative or absolute. Otherwise the image will be displayed at the top of the closest grandparent that has it defined.

edit..

.clicked::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 20%;
  background-image: url(https://i.ibb.co/5c9zFfq/DCIM-100-MEDIA-DJI-0293-JPG.jpg);
}

Javascript:

// this gets HTML collection of all elements with the 'custom-hotspot' class
const elementCollection = document.getElementsByClassName('custom-hotspot');

// add a click listener to each element
elementCollection.forEach(e => {
   e.addEventListener('click', handleClick, {passive: true});
});

/// here we toggle our 'clicked' class
function handleClick(event) {
   // if '.target' does not work as expected try '.currentTarget'
   event.target.classList.toggle('clicked');
}