Is it possible to add image rollovers to this code?

JavaScript
1

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.

<!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>
2 
        <!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(src,over) {
         document.getElementById( 'styled_popup' ).style.display =  'block' ;
         var img=document.getElementById('content');
         img.src=src;
         img.onmouseover=function(){ img.src=over; }
         img.onmouseout=function(){ img.src=src; }
        }

        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 colspan='2' style='background: url( media/x11_body.gif ) no-repeat top left; width: 380px; height: 277px;'>
        <img  id="content" />
        </td></tr>
        </table>

        </div>

        <input type='image' onClick='styledPopupOpen("http://japanesefriend.zxq.net/images/x11_body.gif","http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg");' value=' Fire! ' src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif">
        Please note that we set no z-i
        </body>

    Quick reply to this message Reply   Reply With Quote Reply With Quote   Multi-Quote This Message