How to Change Background Image of a Div Element with Pointer-Events: None When It's Clicked?

Question

I'm creating a mobile landing page by using a combination of two third-party pages embedded in iframes. One of the iframes has been optimized to display a volume button in 50x50 dimensions. The problem is that the sound is off by default and the volume control button is hidden. The iframe shows only a white background, which also doesn't suit the very dark background of the other iframe that takes most of the viewport. The speaker icon appears for a few seconds only when the 50x50 iframed area is touched / clicked, so a visitor has no clue they should touch it for turning the sound on.

I asked ChatGPT and it told me I could use JavaScript to do what I need, but it turned out to be a false information. JavaScript cannot capture a click event on an element that has click events disabled.

So far, the best solution that I could come up with is using pointer-events: none property on a static speaker icon that indicates the volume is turned off and placing it over the iframe with the hidden sound button. But it looks really weird when the sound is already on but the icon still shows it's off.

<iframe
  frameborder="0"
  height="50"
  scrolling="no"
  src="speaker.html"
  style="bottom: 0; left: 0; position: absolute; z-index: 1"
  width="50"
></iframe>

<div class="speaker"
  style="
    background-image: url('Sound-Off.png');
    bottom: 0;
    height: 50;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 50;
    z-index: 2"
></div>

The above alone works as I described but looks confusing to users since the icon doesn't switch to the "volume on" status.

let isOn = false;
const element = document.querySelector('.speaker');
element.addEventListener('click', function(event) {
  isOn = !isOn;
  if (isOn) {
    element.style.backgroundImage = 'url("Sound-On.png")';
  } else {
    element.style.backgroundImage = 'url("Sound-Off.png")';
  }
});

This JavaScript snippet I made with the help of ChatGPT but turned out it doesn't work with pointer-events: none.

Please don't be misled by the same-origin URL in the iframe you see in the snippet. I'm using a hack of an iframe in an iframe in an iframe and the last iframe contains a cross-origin URL as I mentioned at the beginning as the "third-party" page.

Is there a simple workaround to make the sound icon change its status when clicked and letting the click to go through to the iframe beneath at the same time?

"I asked ChatGPT and it told me I could use JavaScript to do what I need, but it turned out to be a false information." — Why do people keep using ChatGPT as a research tool?! — Quentin
– Quentin, Commented Nov 4, 2023 at 20:29
ChatGPT is an utter fool. It spits out words that sort of make sense, but it has no understanding of what it says. — Chris
– Chris, Commented Nov 4, 2023 at 21:25
Does this answer your question? Get DOM content of cross-domain iframe — imhvost
– imhvost, Commented Nov 4, 2023 at 21:37
@imhvost I really don't know what to make of it. I'm not an expert in programming or web development. I either need a step-by-step instruction to solve my problem, or I'm afraid I cannot just come up with a solution myself by poiting me to another solved issue that obviously might have something to do with mine. But as I said I'm not any expert. I know nothing about JavaScript, just a few basics in HTML and CSS, but that's all. — Alex1987
– Alex1987, Commented Nov 4, 2023 at 21:49
hire a professional if ChatGPT can't help you and you can't do it yourself. — imhvost
– imhvost, Commented Nov 4, 2023 at 21:54

Alex1987 · Accepted Answer · 2023-11-05 15:05:03Z

0

The solution to my problem was pretty simple, I only needed to be a bit creative with the limitations I faced.

So, instead of using image of a red speaker with sound off for the static overlay with pointer-events: none, I created a new 50x50px image that says "AUDIO SWITCH" in the upper half and includes both speaker icons in the lower half, one red with sound off and the other green with sound on.

This is how the new overlay image looks like. 🙌

answered Nov 5, 2023 at 15:05

Alex1987

73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Change Background Image of a Div Element with Pointer-Events: None When It's Clicked?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related