Nearly every browser will show image oder video files you want to provide for download in the browser itself instead of opening a download dialog.

Most of the websites suggest to use this code in your .htaccess:

<FilesMatch "\.(jpg|zip|avi)$" >
	ForceType application/octet-stream
</FilesMatch>

But this is not enough! Even when the MIME-Type is set to “octet-stream”, some browsers will still open the files their selfs because they have detected the .jpg or .avi file extension.

The solution to this is to add the following header:

<FilesMatch "\.(jpg|zip|avi)$" >
	ForceType application/octet-stream
	Header add Content-Disposition "attachment"
</FilesMatch>

With this header every browser i tested opened a download dialog, regardless of which file extension is present.

To swap or reload a picture on the fly is easy with Javascript. Just give the img tag a unique id and execute the following command in javascript:

document.getElementById("picture").src = "/img/cool-picture.jpg";

Now comes the glitch in (guess where) Internet Explorer: If you want to reload a picture that has changed on the server (let’s say you have overwritten the picture with a php gd-lib script in the background), the Internet Explorer (i call him msie, spoken “emsy”) always keeps the cached picture instead of reloading the picture from the server like opera and firefox do.
You can fix this behaviour with a simple cache-avoiding technique: Add a random number as a parameter, as shown in the following code, that’s it.

document.getElementById("picture").src = "/img/cool-picture.jpg?r=" + Math.floor(Math.random() * 1000);