Reload image without refreshing the page

See this: Updating a picture without page reload

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

anyways, this was copied off that thread and apparently it should reload the image.

Change your img tag to this:

<img id="badge" src="$cms_url/imaging/badge.php?badge=$mygroup['badge']; ?>">/imaging/badge.php?badge=<?php echo $mygroup['badge']; ?>" />

Then you can use below code to change your image source on click of a button, anchor or whatever:

document.getElementById("badge").src="new image src here";

You can use jQuery as well:

$("#badge").attr("src", "new image src here");

Maybe the javascript i wrote is usefull for someone who reads this question. it ads a timestamp to every image to break the browser cache:

<script type="text/javascript">      function replaceSrc()    {        var images = document.getElementsByTagName('img');        for(var i = 0; i < images.length; i++)        {            var dt = new Date();            var img = images[i];            if(img.src.length >= 0 & img.id != 'idImageNoTimestamp')            {                img.src = img.src + "?" + dt.getTime();                //javascript:alert(document.lastModified);            }        }    }    replaceSrc();      </script>

you can exclude some images by using the id attribute. I used it to exclude Google static maps images. if you don't need it, remove:

 & img.id != 'idImageNoTimestamp'