1. Upload two pictures - first should be the one which will be shown always, and the second one to be shown on roll-over.
2. Copy 'target id' of the second image (click 'target' icon in object menu)
3. Go to 'add custom code' or /code section and paste-in the CSS code replacing [id=...] with the id of your second image into the <head> section.
<style>
div[id='image-rollover.head.135809335494']:hover > img { display: block; }
div[id='image-rollover.head.135809335494'] > img { display: none; }
</style>
4. Viola! Please note that roll-over only works in view mode but not in edit mode.
P.S. If you want to make this roll-over picture a link add add in to the second image (the one that appears on roll-over)