I don't know any way except XHR to do what you want "visitor only load preview of what they onmouseover on".
The previous way I told you only loads preview pictures, the full pictures are theoricaly loaded only on click from the user.
Now, for inserting this inside RAWR template...
If you want the same behaviour as the click on preview button does with current things it can handle, you just have to go up the code part you just show, and erase the file extension 2 times where you found them :
If you didn't change to much the 1.2 RAWR template, this should be at line 327 and 340.
Then, you just add all those erased extension at the following of the extensions at the line 345.
This should shows the preview button as it does for videos, on click it will open the RAWR preview box.
Of course, all your previews pictures must be in the RAWR preview directory (\previews_and_thumbnails\), with the RAWR preview naming convention (prev-imagename.jpg).
There are full of files renamer, try to google ant renamer, if you don't know any.
In a different way, to do a onmouseover that shows the preview pic at the mouse cursor, it will need some more CSS...
This should be done by adding a switch in the [file] section, it will do for all pictures extensions you have decided, an add in the HTML tag, something like class="picprev" :
put this instead of your onmouseover line, just before the <img> tag.
<div class="picprev"><img src="%item-url%.jpg" /></div>
image source is here as if each thumbnail was in the same folder as the complete file and was named like image.jpg.jpg, arrange it like you need, or put back the RAWR url that point to the "previews and thumbnails" folder.
Now, in the CSS file (it depends which color you are using, in the code folder), just put this :
.picprev {position:relative; display:block; width:100px; height:100px;}
.picprev img{display:none; color:#000;}
.picprev:hover{color:#999;} /* for IE */
.picprev:hover img{display:block; position:absolute; top:0; left:0; width:100px; height:100px;}
Now, you just have to put the right url and filename for your previews, define the size you want in the CSS (change width and height), and eventually move the preview elsewhere, also with CSS.
Like it is done here, it will be here for all item (file) that have an existing preview in the same folder, and is called same as the filename+.jpg . You should do the switch in order that this kind of thumbnail is only created for pictures.
