Single popop menu attached to multiple images

[MelHeravi]

I need to create a popup with items (small, medium, large) and attach
it to a whole bunch of images.
Its the same menus for all images. menus should popup around the point
on the image where it was
clicked.
can someone send me a little sample code to do this ?

do i have to create a new popup for my 100s of images ? or would i
create only one and
attach it to an event with x,y coordinates and popup the only one menu
there ?

Please help.

any code sample is highly appreciated.

 

[chaitu.madala]

Hi MelHer...,

You dont need to create 100s of popups.
Is the popup supposed to be shown in a new window or as a layer??

I assume that you are looking to display it in a layer and that layer
has to popup according to the users mouse position when they pass their
mouse over image. Is that right?

If what I understood was right, go through the code below.. Or else
skip this reply

<SCRIPT language="javascript">
ns_xml=(document.layers);
ymouse_xml =0;
xmouse_xml =0;
function Mouse_xml(evnt_xml){
ymouse_xml = ((ns_xml)?evnt_xml.pageY-(window.pageYOffset):event.y);
// ymouse_xml = screenY
xmouse_xml = (ns_xml)?evnt_xml.pageX:event.x;
}

function findElemPosX(obj_xml)
{
var curleft_xml = 0;
if (obj_xml.offsetParent)
{
while (obj_xml.offsetParent)
{
curleft_xml += obj_xml.offsetLeft
obj_xml = obj_xml.offsetParent;
}
}
else if (obj_xml.x)
curleft_xml += obj_xml.x;
return curleft_xml;
alert(curleft_xml)
}

function findElemPosY(obj_xml)
{
var curtop_xml = 0;
if (obj_xml.offsetParent)
{
while (obj_xml.offsetParent)
{
curtop_xml += obj_xml.offsetTop
obj_xml = obj_xml.offsetParent;
}
}
else if (obj_xml.y)
curtop_xml += obj_xml.y;
return curtop_xml;
}


function ElemMouse_xml( elem )
{
if( elem )
{
xmouse_xml = findElemPosX( elem )
ymouse_xml = findElemPosY( elem )
} else
{
Mouse_xml()
}
}

function display_layer(elem)
{
ElemMouse_xml( elem )
div = document.getElementById( "the_id_of_the_popup" )
div.style.visibility = 'visible'
div.style.left = xmouse_xml
div.style.top = ymouse_xml
}
</SCRIPT>

Now call the display_layer( elem ) function. (Here elem is the id of
the image) It gives you the x and y coordinates of the calling image.
Make sure to use different IDs for all the image elements and set the
property of the popup to hidden.

Hope that this helps.

Pls mind my naming convention in the above code. As I had to diaply
more complex layers, I had to use wierd naming conventions..

Chaitu..