clickable-image

an image with a link on click

by Tiago

HTML

<a href="https://www.mathworks.fr/moler/random.pdf" download="randompdf">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/63/Nice-seafront.jpg" width=200 onloadstart="setProgress(30)" onprogress="setProgress(50)" onloadend="setProgress(100)">
</a>

<div id="progressBarDiv">
  <progress id="progressBar" value="0" max="100"></progress>
</div>

<button onclick="setProgress(100)">
  Test:Set to 100
</button>
<button onclick="setProgress(0)">
  Test:Set to 0
</button>

JavaScript

function setProgress(newValue) {
  console.log(newValue);
  $("#progressBar").val(newValue);
}