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" />
<script>
setTimeout(function(){
document.getElementById("img1").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRUtUquo3icuhJzSujUuddhZlSMfkTmy6XXOStmPDM7iZzu8iOI76sqlbga8y6StiNThGwWVrURZeEPdv7cxK8c0DAxkCvkCo3VGSwEgbSKrgvbz7Y2tT7QgN3euh4TSweJn_GOjN-7iKU/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
Thank you for your time
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>
<div id="wrapper">
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
</div>
<script>
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/AVvXsEjRUtUquo3icuhJzSujUuddhZlSMfkTmy6XXOStmPDM7iZzu8iOI76sqlbga8y6StiNThGwWVrURZeEPdv7cxK8c0DAxkCvkCo3VGSwEgbSKrgvbz7Y2tT7QgN3euh4TSweJn_GOjN-7iKU/s320/download-2062197_960_720.png";
}, 10000);
</script>
</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.
stackoverflow.com/help/how-to-ask
– Istiaque Ahmed
Jul 2 at 9:36