Menu deplegado junto a imagen

Simon_Echecopar · #1 (**permalink**) 30/04/2012, 15:07

Código HTML:

<!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" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />-->
<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
  <style type="text/css">
   body {
    background:#FFFFFF;
    width:100%
    heigth:100%;
    margin:0;
   }
   #degradado 
   {
    width: 100%;
    min-height:900px;
    background: url(gradienteazul.jpg) repeat-y scroll 0;
    margin:1;
   }
   #frame1 
   {
    width: 100%;
    min-height:900px;
    background: url(EsTxt.png) repeat-x scroll 0;
    margin:1;
   }
   ul li a
   {
    list-style-type: square;
	margin:0px;
	padding:0px;
	background: #CCEEFF; 
	border: 1px solid #0040FF;
   }
   #dropmenu1
   {
    float:left;
    width:110px;
    height:90px;
    margin:5px;
   }
   
   #dropmenu2
   {
    float:left;
    width:110px;
    height:90px;
    margin:2px;
   }
   
   #dropmenu3
   {
    float:left;
    width:110px;
    height:90px;
    margin:2px;
   }
   
   #dropmenu4
   {
    float:left;
    width:110px;
    height:90px;
    margin:2px;
   }
 /*
   div.title {
    width: 90%;
    color: #072B4B;
    background: transparent none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
   }
   div.title h1 {
    margin-top:0;
    padding:10px;
    font-size:20px;
   }
   div.contenido {
    width:90%;
    background: #FFFFFF;
    border: 2px solid #072B4B;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
   }*/
  </style>
<body>
<script type="text/javascript">
 function mostrar(nombreCapa) 
 { 
  nombreCapa=nombreCapa; 
  document.getElementById(nombreCapa).style.display="block"; 
 } 
 function cerrar(nombreCapa) { 
  nombreCapa=nombreCapa; 
  document.getElementById(nombreCapa).style.display="none"; 
 } 
 function evalua(nombreCapa,chk)
 { 
  nombreCapa=nombreCapa; 
  if (document.getElementById(nombreCapa).style.display == "none") {                         
   mostrar(nombreCapa); 
  }else{ 
   cerrar(nombreCapa); 
  } 
 } 
</script>
 <div id="menu">
   <img src="Menu.png" usemap="#menu" class="chromestyle" id="chromemenu">
   <map name="menu">
   <area id="Area1" onclick = "evalua('dropmenu1')" shape="rect" coords="50,50,120,80" alt="Nosotros" target="frame" />
   <!--1st drop down menu --> 
   <div id="dropmenu1" style="display:none">
    <ul>
	<li><a href="mision.htm" >Misiòn</a></li>
	<li><a href="vision.htm" >Visiòn</a></li>
	</ul>
   </div>
  <area id="Area2" onclick = "evalua('dropmenu2')" shape="rect" coords="130,50,220,80" alt="Servicios" target="frame" />
  <!--2nd drop down menu -->                                                
  <div id="dropmenu2" style="display:none" >
   <ul>
	<li><a href="#" >Sistemas</a></li>
    <li><a href="#" >Diseño</a></li>
    <li><a href="#" >Eventos</a></li>
    <li><a href="#" >Soporte Tecnico</a></li>
   </ul>
  </div>
  <area id="Area3" onclick = "evalua('dropmenu3')" shape="rect" coords="230,50,280,80" alt="Clientes" target="frame" />
  <!--3rd drop down menu -->                                                   
  <div id="dropmenu3" style="display:none" >
   <ul>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo</a></li>
    <li><a href="#">MSN</a></li>
   </ul>
  </div>
  <area id="area4" shape="rect" onclick = "evalua('dropmenu4')" coords="290,50,370,80" alt="Productos" target="frame" />
  <!--<area shape="rect" coords="400,50,490,80" href="NoInfo.html" alt="Servicios" target="frame"/>
  <area shape="rect" coords="490,50,550,80" href="NoInfo.html" alt="Servicios" target="frame"/>
  <area shape="rect" coords="580,50,620,80" href="NoInfo.html" alt="Servicios" target="frame"/>-->
  <div id="dropmenu4" style="display:none">
   <ul>
    <li><a href="#">Equipos</a></li>
    <li><a href="#">Instalaciones electricas</a></li>
    <li><a href="#">Instalaciones computacionales</a></li>
   </ul>
  </div>
  <area id="dropmenu5" shape="rect" coords="640,50,710,80" alt="Contacto" href="contacto.php" />
 </map></div>
 <iframe id="frame" name="frame" src="inicio.htm" width="100%" height="100%"></iframe>
 </body>
</html>

Este es el codigo de una pagina que estoy haciendo y quiero saber como puedo hacer le que el menu desplegado en el <div> se encime a la imagen que tengo. No se si alguien tenga alguna idea.

chwc · #2 (**permalink**) 30/04/2012, 21:32

algun link de esta pagina activa ??
es que se nescesita desde el script hasta las imagenes

C2am · #3 (**permalink**) 01/05/2012, 18:23

Utiliza el z-index de manera que superponer elementos uno sobre otros.
Saludos

Simon_Echecopar · #4 (**permalink**) 02/05/2012, 16:24

Gracias, ya vi como lo puedo hacer. Con position, left y top en CSS se logra.