Changing a picture in SharePoint Site with JavaScript

During a project we got the request to change a special picture in SharePoint. Because it is an Office 365 / SharePoint Online environment and the picture is located under https://%YourSite%/_layouts/images/.... We cannot change the picture with SharePoint Designer or directly in the file system.

So we have to find another way. Because of the picture it is always the same so we can easily use a script looping through the side. As described in the article “Generate a SharePointlist with all user information in Office 365 environment” we have a list containing all users in the SharePoint Online system. The request was to change the default dummy picture for users without a personal picture in the profile.

And here is the script:

<script type="text/javascript">

<!--
function swapImages(oldimg,newimg)

{

var n = document.getElementsByTagName("img");

for ( i=0;i<n.length;i++) if (n[i].src==oldimg) n[i].src=newimg;

}
// call at end of html-page or when onload-event fired
swapImages("http://%YourSite%/oldimg.png","http://%YourSite%/newimage.png");

//-->

</script>

Special thanks to Oliver (http://pixelbrothers.com/ ) helping us to write the script!

 
Simply place the script into the HTML code of a ContentEditor Webpart