Why isn't this code working?

JavaScript
1

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 
<!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

vwphillips, Thank you so much for your time. However, when I click the buttons no windows seem to be popping up?

-Anthony

4

Here’s my site and what im trying to do

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

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?