New window from dropdown menu

**Magiccupcake** · 12-22-2006, 10:11 PM

I have been trying to figure this out for more than a month and I have not gotten anywhere yet. So maybe someone can help me.

I want to add a script to an image on a website, so that when a person puts their cursor on it, a menu with different links will pop up under it.

It doesn’t necessarily have to be done in JavaScript, if there is a better way.

Also I want the links to open in new windows with specific sizes.

I know that opening a new window is usually a bad idea. But for this I think it will work ok. And also it is for a client and it only matters what they want.

If anyone has a good way to do this let me know.

Thanks in advance.

**Kirtan** · 05:14 AM

Hi, Here is some code. Hope this help

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:15px; top:62px; width:126px; height:144px; z-index:1; visibility: hidden;">
<a href="#" target="_blank" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link One</a><br />
<a href="#" target="_blank" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link Two</a><br />
<a href="#" target="_blank" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link Three</a><br />
</div>
<a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')"><img src="HLPBELL.GIF" width="43" height="39" border="0"></a>
</body>
</html>

**Magiccupcake** · 01-01-2007, 10:14 PM

Thanks. I have been able to do that much my self. But now how would I be able to make the linked pages open in specific sizes?

**Kirtan** · 01-02-2007, 09:14 AM

Add this function to above code

Code:

function newWindow()
{
    window.open('test.html','_blank','heigh=200,width=400,scrollbars=1');
}

And invoke onClick even in links like this

Code:

<a href="javascript:newWindow();" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">Link Three</a><br />

This is raw. It is better to assign window.open() return value in a global variable to have better control about child window. If this helps you, give me talkputation.

**Magiccupcake** · 01-09-2007, 11:49 PM

Thanks a lot. This was really exactly what I have been looking for!