+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Button to download Img Src (/showthread.php?tid=5101367)
Button to download Img Src - Wide Awake - Dec 20, 2015
Alright guys so i got my website working..
Now i came across the last problem.. at least i hope.
On mobile, if the user holds the image to save. They will get the actual img url on top of the context menu.
I do not want them to see that.
So my only option is to implement a download button.
I'm not sure exactly how to make a button download image src with an id tag?
If possible.
* - Vex-Enterprises - Dec 20, 2015
h ttp :// stackoverflow (dot) com/questions/18807860/download-image-on-button-click
this seems to be exactly what you are looking for
* - Wide Awake - Dec 20, 2015
(Dec 20, 2015 07:30 AM)Vex-Enterprises Wrote: h ttp :// stackoverflow (dot) com/questions/18807860/download-image-on-button-click
this seems to be exactly what you are looking for
Weird, google didn't pick that one up.
Anyways although that wasn't from a button. I'll just make a button from an image and use that solution.
Thanks man!
btw welcome to the forum!
EDIT: Yeah no this won't work. You see the image will be different all the time. So that means it will contain a different image link.
I can't set up a static href.. what can i do?
* - Vex-Enterprises - Dec 23, 2015
how are you making the image different?
would you be able to do like an <a href="" download> within the code that brings up the images?
* - .trigious - Dec 23, 2015
Hey. Just read you found your solution, but I wanted to suggest a little technique you can use to not allow the user to download the image while holding it. Atleast this works on Desktop:
HTML
Code
<div id="parent">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample6.jpg">
<div id="overlay"></div>
</div>CSS
Code
#parent {
position: relative;
}
img {
height: 300px;
width: 500px;
}
#overlay {
height: 300px;
width: 500px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}Live preview: http://codepen.io/anon/pen/mVrdPY
There's also an HTML5 attribute called "download".
http://stackoverflow.com/questions/18924238/download-image-on-button-click-using-jquery
Hit me up if you need any help.