Below, I have a code that allows my images, when clicked, to open up a movable pop up window (similar to jQuery). I was wondering if there was a way I could always have these images that are clicked show a rollover image as well to add extra style to the design. Is it possible? I have been playing with many different options but I can't seem to get it to work. Again, Below is the raw code with some example images etc. I appreciate any and all help.

Sincerely,
Anthony M.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type='text/css'>
.dragme { cursor: move }
</style>

<script type='text/javascript'>
var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;

function movemouse( e ) {
 if( isdrag ) {
   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
   return false;
 }
}

function selectmouse( e ) {
 var fobj       = nn6 ? e.target : event.srcElement;
 var topelement = nn6 ?  'HTML'  :  'BODY' ;
 while (fobj.tagName != topelement && fobj.className !=  'dragme' ) {
   fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }

 if (fobj.className== 'dragme' ) {
   isdrag = true;
   dobj = document.getElementById( 'styled_popup' );
   tx = parseInt(dobj.style.left+0);
   ty = parseInt(dobj.style.top+0);
   x = nn6 ? e.clientX : event.clientX;
   y = nn6 ? e.clientY : event.clientY;
   document.onmousemove=function(e){ movemouse(e); }
   return false;
 }
}

function styledPopupClose() {
 document.getElementById( 'styled_popup' ).style.display =  'none' ;
}

function styledPopupOpen(html) {
 document.getElementById( 'styled_popup' ).style.display =  'block' ;
 document.getElementById('content').innerHTML=html||'';
}

document.onmousedown=selectmouse;
document.onmouseup=function(){ isdrag=false; };
</script>
</head>

<body>
<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px;'>

<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='media/x11_title.gif' class='dragme'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
border='0'></a></td>
</tr>
<tr><td id="content" colspan='2' style='background: url( media/x11_body.gif ) no-repeat top left; width: 380px; height: 277px;'>
Drag my window title to see me moving :-)
</td></tr>
</table>

</div>

<input type='image' onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/images/x11_body.gif />")' value=' Fire! ' src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif">
  <input type='image' onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/images/gakkou_03.gif />")' value=' Fire! ' src="file:///C|/Users/Anthony/Desktop/Kanji/Level 4/images/level4_nouns_15.gif">

Please note that we set no z-i
</body>