I have a page in my site, displaying images. When I right click on an image and click Save Image As I get as default name. I want to change the image name on right click and save it.
This is for example:
In my HTML code I have
image src="abc.jpeg"
When I right click, I want this image to be saved as def.jpg.
Is there a way to do this?
As far as I know, you can't do that with JavaScript. This is something that can only be handled on the server-side.
If you're using PHP, a simple solution would be to use header().
// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');
You can replace download.pdf by a variable of course.
header('Content-Disposition: attachment; filename="' . $fileName .'"');
From the PHP documentation:
If you want the user to be prompted to save the data you are sending, such as a generated PDF file, you can use the » Content-Disposition header to supply a recommended filename and force the browser to display the save dialog.
Don't do it, not every browser will support it (opt-out for contextmenu events is also possible in some). Why should you want to do so?
I guess you want to link to the big versions of your thumbnails. So just put a link (<a>) around your image tags and everyone will be happy. When you indicate the link with a descriptive tooltip, it would be even better.
EDIT:
When you have an image already included in a page, you can't change the default title the user agent will offer when you click [Save as]. Point, no exeptions.
The browser will likely use the file name from the download path. You can't change the src attribute dynamically (by script), because that would make another file load. What you can do is deliver the page with the files already under their aspired file names, but is to be done at the server.
So option #2 is starting a (new) file download. In the Content-Disposition header you can dynamically (at the server) propose any filename for the sent content. For starting the download, just wrap your image into a link (of which you even can change the href attribute). Or you might want to build a custom context menu to display the download link as a [Save as] button (how to do so would be the matter of a different question).
Option #3 would be to open the file in a new tab/window, apply document.execCommand("SaveAs", [...]) on it and close the tab/window again. Unfortunately, this is only supported in Internet Explorer; see Does execCommand SaveAs work in Firefox? for this and the suggestions.
Well there's a way to do this.. but i'm not sure if it works with most of the browsers.
add oncontextmenu="return false;" attribute in your body tag. It will disable the context menu (hopefully ?!) !
And if you want custom context menu then do it with little css and script. Attach event handler for click event and carry out action when left or right click is occurred.
You put this in the image
<img src=".." onClick="this.src='new URL'">
or you can do it in a separate function
<img src=".." onClick="change(this)">
//
<script>
function change(img) {
img.src = 'new src';
}
</script>
