SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to add image rollovers to this code?

    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>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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(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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •