SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

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

    Unhappy Why isn't this code working?

    Hello! I am currently building a website that has certain images, when clicked will open up a movable pop up window like this here.

    http://dhtmlpopups.webarticles.org/movable.php

    (go down to the bottom and click the (fire) button to test it)

    the code and source files are available on the top page

    instead of the submit button, i set it to a image. That has been working great.

    Now, here is my problem. I need this to be, when clicked depending on the image, it will show different images in the pop up window. But when I duplicated the code and pasted it elsewhere on the same page it seems that no matter what i do it just shows the very first image and it doesn't change anything. Even when I changed the links to the image files. What exactly is wrong?
    detailed example of what Im trying to do

    1. Image one is clicked and shows red image with movable window.
    2. Image two is clicked and shows blue image with movable window.

    I GREATLY appreciate any assistance/feedback from all of you.

    Sincerely,
    Anthony M.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    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(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='button' onClick='styledPopupOpen("<img src=http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg />")' value=' Fire! '>
    <input type='button' onClick='styledPopupOpen("<img src=http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg />")' value=' Fire! '>
    
    Drag my window title to see me moving :-)
    
    OK, now let's see it in action!
    
    Please note that we set no z-i
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vwphillips, Thank you so much for your time. However, when I click the buttons no windows seem to be popping up?

    -Anthony

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my site and what im trying to do

    http://japanesefriend.zxq.net/nouns.html

    When someone clicks the kanji character a movable window comes up. But i need the image INSIDE the window to be different depending on which image they click. Thanks!

    -Anthony

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I got it working for the most part! my last question would be instead of submit buttons, could i have those be images that rollover?


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
  •