Click to change background PNG?

[TKCMuzzer]

Hello dev world, is it possible to change the background PNG of a watchface by just clicking the screen? eg, if I had a background image and just wanted to change to another with a click of the screen, can it be done?

Thank you in advance

[SunsetRunner]

index.js

import document from "document";

var img = document.getElementById("myImage");
img.href = "1.jpg";


img.onclick = (e) => {
  console.log("clicked");
  if (img.href === "2.jpg") {
      img.href = "1.jpg";
  } else {
      img.href = "2.jpg";
  }
}


console.log("App Started");

index.gui

<svg>
  <image id="myImage" x="0" y="0" width="100%" height="100%" href="./1.jpg" pointer-events="visible" />
</svg>

[davinche]

---

wrote:

index.js

import document from "document";

var img = document.getElementById("myImage");
img.href = "1.jpg";


img.onclick = (e) => {
  console.log("clicked");
  if (img.href === "2.jpg") {
      img.href = "1.jpg";
  } else {
      img.href = "2.jpg";
  }
}


console.log("App Started");

index.gui

<svg>
  <image id="myImage" x="0" y="0" width="100%" height="100%" href="./1.jpg" pointer-events="visible" />
</svg>

---

This. But just as a friendly reminder, the key thing here for allowing onclick handlers is to add the pointer-events attribute to the element you want clickable.

[TKCMuzzer]

Cheers, much appreciated