How would I add a download link into the second image of this script


How would I add a download link into the second image of this script



This is the script I am working with (below)



As the images are built into the script I am unsure on how to add a download link/link to website. to the second image



The script changes from image 1 to image 2 after 10 seconds and then I want then to be able to CLICK image 2 (like a button)



Here is the script I am working with if you could maybe help me with adding it in or tell me what I need to add in and where that would be much appreciated


<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />

setTimeout(function(){
document.getElementById("img1").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1bprjlqBzT9VB3d07da64wRovv-65_qWmN3FlU61ZQEhiQRXXVMbD4cTWMHC9Axg0nO00PKMrikHCLa504Wt6tySamGGSc7Ty9bGSivuhwVSZ7gNNEDcErHeT54ANlcd-2f6ODIJN7x6/s320/download-2062197_960_720.png";
}, 10000);

</body>
</html>



Thank you for your time





stackoverflow.com/help/how-to-ask
– Istiaque Ahmed
Jul 2 at 9:36




2 Answers
2



After you've changed src of the image, just add a "click" event listener to it


src


"click"


setTimeout(function(){
document.getElementById("img1").src = "link";
document.getElementById("img1").addEventListener("click", function (event) {
// when someone clicks
});
}, 10000);





Hello thank you for taking the time to helping me. How would I add that script you just sent into mine ? Or would I just place it below ? Sorry I am very new to this but Eager to learn
– Pauline Mckenzie
Jul 2 at 9:39






@PaulineMckenzie You could consider accepting the answer if it helped you.
– Danon
Jul 2 at 9:40





Hi how would I implement your script in to my script to get it to work ? Again thank you for your time
– Pauline Mckenzie
Jul 2 at 9:53



Use below code and replace Download_Link with desired link


<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>





setTimeout(function(){

var mydiv = document.getElementById("img1");

var aTag = document.createElement('a');
aTag.setAttribute('href',"Download_Link");

aTag.setAttribute('download', true);

aTag.appendChild(mydiv);

document.getElementById("wrapper").appendChild(aTag);

document.getElementById("img1").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1bprjlqBzT9VB3d07da64wRovv-65_qWmN3FlU61ZQEhiQRXXVMbD4cTWMHC9Axg0nO00PKMrikHCLa504Wt6tySamGGSc7Ty9bGSivuhwVSZ7gNNEDcErHeT54ANlcd-2f6ODIJN7x6/s320/download-2062197_960_720.png";
}, 10000);

</body>
</html>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

How to set up datasource with Spring for HikariCP?

Display dokan vendor name on Woocommerce single product pages