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>
Comments
Post a Comment