To achieve this, you can easily move your JavaScript code into a function and incorporate the removeAttribute('onmouseover') method after altering the src. Since I don't have access to your images, I utilized the first couple that appeared in a Google search:
function updateImage(elm) {
elm.src = 'http://www.image-mapper.com/photos/original/missing.png?1263880893';
elm.removeAttribute('onmouseover');
}
.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}
<img class="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="updateImage(this);" />
Check out the JSFiddle link for a demo: http://jsfiddle.net/mavpx438/
If you inspect the rendered code in Developer Tools, you'll observe that initially, the onmouseover attribute is present on the img element. However, when you hover over the image, it triggers a change in the image followed by instantaneous removal of the onmouseover attribute. This approach prevents the image from reloading upon subsequent mouseovers.
I trust this information proves useful to you!
Additional Note:
Given that your question about utilizing only HTML/CSS was no longer visible along with my previous response, I wanted to provide further clarification here.
While CSS offers pseudo-class selectors like :hover for achieving mouseover effects, these changes are temporary and do not persist. To make lasting modifications to the rendered output, scripting is essential, as demonstrated in the JavaScript solution presented. HTML5 has certainly expanded capabilities, yet its static nature necessitates dynamic functionality requiring JavaScript. Looking ahead, HTML6 might introduce more dynamic rendering possibilities, but at present, scripting remains indispensable for such tasks.
I hope this elaboration sheds light on why an exclusive reliance on HTML/CSS falls short in implementing permanent alterations.