CODEWITHSUNDEEP
javascripthtmlcsssvg
Michael Swarts
Michael Swarts

Reputation: 3921

Unable to swap <image> href using JavaScript

This code works for changing the value of href, which I can confirm because the alert alternates confirmation as expected. However, the <image> is unchanging. What is the problem?

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage() {
  if (this.href == onImg) {
    alert('turning off');
    this.href = offImg;
  } else {
    alert('turning on');
    this.href = onImg;
  }
}
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage()"/>
    </svg>
  </li>
</ul>

Upvotes: 0

Views: 95

Answers (1)

Kaiido
Kaiido

Reputation: 136638

A few things:

  • First you set a clipPath to your image, without defining it, this will prevent the click event from firing on your image in at least Firefox.
  • Then you attach your event handler as an event-attribute, this won't get passed this way, you have to pass it yourself from the event handler.
  • Finally, SVGImageElement.href is an SVGAnimatedString, not a string. If you want to retrieve or edit it, you need to get or set its .baseVal value:

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
function toggleImage(img) {
  if (img.href.baseVal == onImg) {
    alert('turning off');
    img.href.baseVal = offImg;
  } else {
    alert('turning on');
    img.href.baseVal = onImg;
  }
}
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg" onclick="toggleImage(this)"/>
    </svg>
  </li>
</ul>

Or you could simply set the attribute, and use a correct event handler:

var onImg= "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg";
var offImg= "https://upload.wikimedia.org/wikipedia/commons/3/3d/1951_Unión_1-Colón_1.png";
document.querySelector("image").addEventListener("click",  function toggleImage(evt) {
  const current_value = this.getAttribute("href");
  if (current_value == onImg) {
    alert('turning off');
    this.setAttribute("href", offImg);
  } else {
    alert('turning on');
    this.setAttribute("href", onImg);
  }
});
<ul class="board">
  <li>
     <svg width="100%" height="100%" viewBox="0 0 2911 2521">
        <image height="100%" width="100%" href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg/1000px-CSIRO_ScienceImage_3881_Five_Antennas_at_Narrabri.jpg"/>
    </svg>
  </li>
</ul>

Upvotes: 2

Related Questions