<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.dynamicdrive.com/dynamicindex1/popit.htm -->
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Dynamic Drive DHTML Scripts- Pop-it menu</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK 
href="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/mainstyle.css" 
type=text/css rel=stylesheet>
<STYLE type=text/css>#popitmenu {
	BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 100; VISIBILITY: hidden; FONT: 12px/18px Verdana; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: white
}
#popitmenu A {
	DISPLAY: block; PADDING-LEFT: 6px; COLOR: black; TEXT-DECORATION: none
}
#popitmenu A:hover {
	BACKGROUND-COLOR: #ccff9d
}
</STYLE>
<?php
include("emergente.php");
 ?>





var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}



function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</SCRIPT>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY>
<DIV id=toprightdiv>
<DIV id=toprightdivbox>
<FORM id=topform action=http://search.freefind.com/find.html method=get><INPUT 
type=hidden size=-1 value=6299074 name=id> <INPUT type=hidden size=-1 value=r 
name=pageid> <INPUT type=hidden size=-1 value=ALL name=mode> <INPUT type=hidden 
value=0 name=n> <INPUT id=topsearchbox alt=Search maxLength=255 name=query> <INPUT class=topformbutton type=submit value=Search> </FORM>
<DIV style="MARGIN-TOP: 3px"><A 
href="http://www.dynamicdrive.com/submitscript.htm">Submit</A> <A 
href="http://www.dynamicdrive.com/faqs.htm">FAQs</A> <A 
href="http://www.dynamicdrive.com/award/">Awards</A> <A 
href="http://www.dynamicdrive.com/notice.htm">Usage Terms</A> <A 
href="http://www.dynamicdrive.com/contact.htm">Contact</A></DIV></DIV></DIV><A 
title="Dynamic Drive- Award winning DHTML and JavaScript" 
href="http://www.dynamicdrive.com/"><IMG height=55 
src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/logo.gif" width=267 
border=0></A> 
<DIV id=ddtoptabs>
<UL>
  <LI style="MARGIN-LEFT: 1px"><A title=Home 
  href="http://www.dynamicdrive.com/"><SPAN>Home</SPAN></A> 
  <LI><A title=New 
  href="http://www.dynamicdrive.com/new.htm"><SPAN>New</SPAN></A> 
  <LI><A title=Revised 
  href="http://www.dynamicdrive.com/revised.htm"><SPAN>Revised</SPAN></A> 
  <LI><A title=Tools 
  href="http://tools.dynamicdrive.com/"><SPAN>Tools</SPAN></A> 
  <LI><A title="DHTML Forums" 
  href="http://www.dynamicdrive.com/forums/"><SPAN>Forums</SPAN></A> 
  <LI id=csslibrarytab><A title="CSS Library" 
  href="http://www.dynamicdrive.com/style/"><SPAN>CSS Library</SPAN></A> 
</LI></UL></DIV>
<DIV id=ddtoptabsline><IMG 
src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/spacer.gif"></DIV>
<CENTER>
<SCRIPT src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/adbanner.js" 
type=text/javascript></SCRIPT>
</CENTER>
<P id=pathlinks><A href="http://www.dynamicdrive.com/">Home</A> <IMG height=10 
src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/arrow2.gif" width=8 
border=0> <A href="http://www.dynamicdrive.com/dynamicindex1/">Menu and 
Navigation</A> <IMG height=10 
src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/arrow2.gif" width=8 
border=0> Here</P>
<TABLE id=maintable cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD id=leftbar vAlign=top>
      <DIV class=headers>Categories</DIV>
      <UL class=categorylinks>
        <LI id=c7><A 
        href="http://www.dynamicdrive.com/dynamicindex7/">Calendars</A> 
        <LI id=c6><A href="http://www.dynamicdrive.com/dynamicindex6/">Date 
        &amp; Time</A> 
        <LI id=c3><A href="http://www.dynamicdrive.com/dynamicindex3/">Document 
        Effects</A> 
        <LI id=c17><A href="http://www.dynamicdrive.com/dynamicindex17/">Dynamic 
        Content</A> 
        <LI id=c16><A href="http://www.dynamicdrive.com/dynamicindex16/">Form 
        Effects</A> 
        <LI id=c12><A 
        href="http://www.dynamicdrive.com/dynamicindex12/">Games</A> 
        <LI id=c4><A href="http://www.dynamicdrive.com/dynamicindex4/">Image 
        Effects</A> 
        <LI id=c5><A href="http://www.dynamicdrive.com/dynamicindex5/">Links 
        &amp; Tooltips</A> 
        <LI id=c1><A href="http://www.dynamicdrive.com/dynamicindex1/">Menus 
        &amp; Navigation</A> 
        <LI id=c13><A href="http://www.dynamicdrive.com/dynamicindex13/">Mouse 
        and Cursor</A> 
        <LI id=c2><A 
        href="http://www.dynamicdrive.com/dynamicindex2/">Scrollers</A> 
        <LI id=c10><A href="http://www.dynamicdrive.com/dynamicindex10/">Text 
        Animations</A> 
        <LI id=c9><A 
        href="http://www.dynamicdrive.com/dynamicindex9/">User/System 
        Preference</A> 
        <LI id=c8><A href="http://www.dynamicdrive.com/dynamicindex8/">Window 
        and Frames</A> 
        <LI id=c11><A 
        href="http://www.dynamicdrive.com/dynamicindex11/">Other</A> 
        <LI id=c18><A href="http://www.dynamicdrive.com/dynamicindex18/">XML and 
        RSS</A> </LI></UL>
      <DIV class=headers>Other Sections</DIV>
      <UL class="categorylinks diffpointer">
        <LI><A href="http://www.dynamicdrive.com/forums/">Script Forums</A> 
        <LI><A href="http://www.dynamicdrive.com/recommendit/">Recommend Us</A> 
        <LI><A href="http://www.dynamicdrive.com/notice.htm">Usage Terms</A> 
        <LI><A href="http://www.javascriptkit.com/">Free JavaScripts</A> 
</LI></UL>
      <DIV class=curlycontainer style="DISPLAY: none">
      <DIV class=innerdiv><B><A 
      href="http://www.dynamicdrive.com/advertise.htm">Advertise Here</A></B> 
      <BR>Learn more about the DD site wide text ad spot and other ad 
      opportunities. </DIV></DIV>
      <DIV class=headers>Compatibility</DIV>
      <UL class=menuitems>
        <LI style="BORDER-BOTTOM: #ececec 1px solid"><B>IE5+:</B> IE 5 and above 

        <LI style="BORDER-BOTTOM: #ececec 1px solid"><B>FF1+:</B> Firefox 1.0+. 
        NS6+ and FF beta are assumed as well. 
        <LI style="BORDER-BOTTOM: #ececec 1px solid"><B>Opr7+:</B> Opera 7 and 
        above. </LI></UL>
      <DIV>Bookmark <B style="COLOR: navy">
      <SCRIPT type=text/javascript>document.write(ddscripttitle)</SCRIPT>
      </B>online:<BR>
      <UL 
      style="MARGIN-TOP: 5px; PADDING-LEFT: 18px; FONT-SIZE: 90%; MARGIN-LEFT: 0px">
        <LI><A onClick="return jsenabledmark('deli')" 
        href="http://www.dynamicdrive.com/bookmark.php?site=deli" 
        rel=nofollow>Bookmark</A> to del.icio.us 
        <LI><A onClick="return jsenabledmark('furl')" 
        href="http://www.dynamicdrive.com/bookmark.php?site=furl" 
        rel=nofollow>Bookmark</A> to Furl.net </LI></UL></DIV>
      <P align=center><A href="http://www.dynamicdrive.com/link.htm"><IMG 
      height=15 
      src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/dhtml-scripts.png" 
      width=80 border=0></A><BR><A style="FONT-SIZE: 80%" 
      href="http://www.dynamicdrive.com/link.htm">Link Back</A></P></TD>
    <TD id=spacertd><IMG id=spacergif 
      src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/spacer.gif"> </TD>
    <TD id=contentarea vAlign=top>
      <SCRIPT type=text/javascript>
if (showincontentheader)
document.write('<div id="topbanner" align="left">'+revised_ranban[ran_num]+'</div>')
</SCRIPT>

      <DIV id=scriptheader><SPAN class=compatlist>NS6+ IE5+ Opera 7+</SPAN> 
      <H3>Pop-it menu</H3></DIV>
      <DIV id=scriptheaderFoot><SPAN class=rightit></SPAN><B>Author:</B> <SPAN 
      id=ddauthor>Dynamic Drive</SPAN></DIV>
      <P align=left><B>Note:</B> Last updated April 14th, 05' for various 
      improvements.</P>
      <P align=left><STRONG>Description: </STRONG>Pop-it allows you to associate 
      a dynamic menu with regular links on your page. As the mouse moves over 
      the link in question, a menu pops up containing "sub links". Think of it 
      as a "loose" <A 
      href="http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm">drop 
      down menu</A>.</P>
      <P align=left>This is a great script for expanding links on your page with 
      a 2nd level. The menu intelligently re-positions itself depending on how 
      close it is to the edge of the browser window, so it's always in full 
      view.</P>
      <P align=left>This script works in IE4+, NS4, and NS6+/Opera7+. You can 
      specify a valid default URL for each link for other browsers to navigate 
      to.</P>
      <P align=left><STRONG>Demo: </STRONG>
        <label></label>
      </P>
      <P align=left><!--webbot bot="HTMLMarkup" startspan --><!--webbot
    bot="HTMLMarkup" endspan i-checksum="22452" --> 
        <A 
      onmouseover=showmenu(event,linkset[0]) onmouseout=delayhidemenu() 
      href="http://www.dynamicdrive.com/dynamicindex1/popit.htm#">Webmaster 
      Links</A><BR>
      <A onMouseOver="showmenu(event,linkset[1], '180px')" 
      onmouseout=delayhidemenu() 
      href="http://www.dynamicdrive.com/dynamicindex1/popit.htm#">News sites</A>
      <SCRIPT 
      src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/show_ads.js" 
      type=text/javascript>
      </SCRIPT>
</P>
      <P align=left>
        <select name="select">
          <option value="1">el pico peluo</option>
          <option value="2">la zorra con moco</option>
        </select>
      </P>
      <HR SIZE=1>

      <P align=left><STRONG>Directions </STRONG><A 
      href="http://www.dynamicdrive.com/dynamicindex1/popit_dev.htm" 
      target=win2><IMG height=19 alt="Developer's View" 
      src="file:///C|/Documents and Settings/Administrador/Escritorio/Dynamic Drive DHTML Scripts- Pop-it menu_archivos/dview.gif" 
      width=115 border=0></A></P>
      <P align=left><STRONG>Step 1: </STRONG>Insert the following script into 
      the &lt;head&gt; section of your page:</P>
      <FORM>
      <DIV align=left><A class=selectall href="javascript:highlight(0)">Select 
      All</A><BR><TEXTAREA class=codecontainer name=S2 rows=8 wrap=virtual cols=45>&lt;style type="text/css"&gt;

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='&lt;a href="http://dynamicdrive.com"&gt;Dynamic Drive&lt;/a&gt;'
linkset[0]+='&lt;hr&gt;' //Optional Separator
linkset[0]+='&lt;a href="http://www.javascriptkit.com"&gt;JavaScript Kit&lt;/a&gt;'
linkset[0]+='&lt;a href="http://www.codingforums.com"&gt;Coding Forums&lt;/a&gt;'
linkset[0]+='&lt;a href="http://www.cssdrive.com"&gt;CSS Drive&lt;/a&gt;'
linkset[0]+='&lt;a href="http://freewarejava.com"&gt;Freewarejava&lt;/a&gt;'

linkset[1]='&lt;a href="http://msnbc.com"&gt;MSNBC&lt;/a&gt;'
linkset[1]+='&lt;a href="http://cnn.com"&gt;CNN&lt;/a&gt;'
linkset[1]+='&lt;a href="http://news.bbc.co.uk"&gt;BBC News&lt;/a&gt;'
linkset[1]+='&lt;a href="http://www.washingtonpost.com"&gt;Washington Post&lt;/a&gt;'

////No need to edit beyond here

var ie5=document.all &amp;&amp; !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('&lt;div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"&gt;&lt;/div&gt;')

function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&amp;&amp;!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge&lt;menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge&lt;menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&amp;&amp;!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&amp;&amp;e.currentTarget!= e.relatedTarget&amp;&amp; !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

&lt;/script&gt;</TEXTAREA></DIV></FORM>
      <P align=left><STRONG>Step 2: </STRONG>Add the below to the &lt;body&gt; 
      of your page. It contains the HTML codes for the menu:</P>
      <FORM>
      <P><A class=selectall href="javascript:highlight(1)">Select All</A><BR><TEXTAREA class=codecontainer name=S1 rows=8 wrap=virtual cols=45>&lt;a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"&gt;Webmaster Links&lt;/a&gt;&lt;br&gt;
&lt;a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()"&gt;News sites&lt;/a&gt;</TEXTAREA></P></FORM>
      <H3>Configuring the menu</H3>
      <P>Customizing the menu is an easy process:</P>
      <P>1) Edit array "linkset[]" inside code of Step1 to specify the menu sets 
      and their links.<BR>2) Then, change the &lt;A&gt; tags of code of Step 2 
      so the desired menu (ie: linkset[0]) is associated with the link.</P>
      <P>You can also modify the pop-it menu's visual look by changing the Style 
      Sheet of Step 1. To modify the menu's width, first set the variable 
      "defaultMenuWidth" in the code of Step 1. Then for a specific menu that 
      you wish to have a different width, pass in an optional 3rd parameter (ie: 
      "180px") inside function showmenu(), as shown in the code of Step 2.</P>
      <P>Have fun!</P>
      <SCRIPT type=text/javascript><!--
google_ad_client = "pub-3356683755662088";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al";
google_ad_channel ="";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "3333FF";
google_color_url = "999999";
google_color_text = "000033";
//--></SCRIPT></TD>
  </TR></TBODY></TABLE>
<P id=footer>Copyright © 1998-2006 <A 
href="http://www.dynamicdrive.com/">Dynamic Drive.</A> Please read <A 
href="http://dynamicdrive.com/notice.htm">Terms Of Use here</A> before using any 
of the scripts.</P></BODY></HTML>
