Foros del Web » Programando para Internet » Javascript »

Botonera tipo Acordeon JS

 Estas en el tema de Botonera tipo Acordeon JS en el foro de Javascript en Foros del Web. Buenos días a tod@s Tengo un problema con una botonera que he hecho del tipo acordeon (3 botones, cuando pasas el ratón por uno de ...
  #1 (permalink)  
Antiguo 03/12/2007, 03:15
 
Fecha de Ingreso: noviembre-2007
Ubicación: San Juan de Alicante
Mensajes: 78
Antigüedad: 16 años, 5 meses
Puntos: 7
Botonera tipo Acordeon JS
Buenos días a tod@s

Tengo un problema con una botonera que he hecho del tipo acordeon (3 botones, cuando pasas el ratón por uno de ellos se despliega un menu que hace que el boton de abajo se desplace hacia abajo)
El problema es que en IE no me funciona correctamente, y no entiendo por qué. Me han dicho que el IE da problemas con JS y hay que ponerle un parche o algo parecido para que el dichoso navegador lo lea correctamente. Os adjunto el código para ver si a vosotros se os ve bien y si me podeis hechar una mano.
Código: 
<script  type="text/javascript">
<!--

function Sobre(k) {
 if (document.images) 
  eval('document.botonera_sec_ofertaformativa0'+k+'.src="botonera_sec_ofertaformativa-0'+k+'-r.png"');
}

function Fora(k) {
 if (document.images) 
  eval('document.botonera_sec_ofertaformativa0'+k+'.src="botonera_sec_ofertaformativa-0'+k+'.png"');
}

//-->
</script>
<style type="text/css" media="screen">
	@import url("./botonera_sec_ofertaformativa.css");
</style>
</head>
<body bgcolor="#ffffff" >
  
  <div class="menu vert">
    <ul>

      <li>
      </li>
    </ul>
    <ul>
      <li>
<img name="botonera_sec_ofertaformativa01" src="botonera_sec_ofertaformativa-01.png" width="161" height="45" border="0" id="botonera_sec_ofertaformativa-01" alt="" onmouseover="Sobre(1);return true;" onmouseout="Fora(1);return true;"  />
        <ul>
	  <li>
		<a href="lapedrera.html" target="_self">

			La&nbsp;pedrera&nbsp;(Bigastro)
		</a>
		<a href="casatapena.html" target="_self"  >
			Casa&nbsp;T&aacute;pena&nbsp;(Onil)
		</a>
		<a href="dunasguardamar.html" target="_self"  >
			Dunas&nbsp;de&nbsp;Guardamar
		</a>

		<a href="parqueelche.html" target="_self"  >
			Parque&nbsp;municipal&nbsp;Elche
		</a>
		<a href="bahia.html" target="_self">
			Bah&iacute;a&nbsp;Alicante
		</a>
		<a href="tranvia.html" target="_self" >
			Tranvia&nbsp;Ambiental
		</a>

		<a href="terranatura.html" target="_self" >
			Terra&nbsp;Natura
		</a>
		<a href="viajefosiles.htm" target="_self"  >
			Viaje&nbsp;mundo&nbsp;de&nbsp;los&nbsp;f&oacute;siles
		</a>
		<a href="descubreparques.html" target="_self"  >

			Descubre&nbsp;los&nbsp;parques
		</a>

	  </li>
	</ul>
      </li>
    </ul>
 <ul >
      <li><img name="botonera_sec_ofertaformativa02" src="botonera_sec_ofertaformativa-02.png" width="161" height="55" border="0" id="botonera_sec_ofertaformativa-02" alt="" onmouseover="Sobre(2);return true;" onmouseout="Fora(2);return true;"  />

        <ul>
	  <li>
	        <a href="benialtea.html" target="_self"  >
			Isla&nbsp;Benidorm&nbsp;-&nbsp;Altea
		</a>
		<a href="xixona.html" target="_self"  >
			Coves&nbsp;Canelobre
		</a>

		<a href="tabarca.html" target="_self" >
			Tabarca
		</a>
		<a href="ibionil.html" target="_self" >
			Ibi-Sierra&nbsp;Onil
		</a>
		<a href="guardamar.html" target="_self" >
			Guardamar
		</a>
		<a href="elche.html" target="_self" >

			Elche
		</a>
		<a href="rojales.html" target="_self" >
			Rojales&nbsp;-&nbsp;La&nbsp;Pedrera
		</a>
		<a href="terranaturamayores.html" target="_self" >
			Terra&nbsp;Natura
		</a>

		<a href="viajefosilesmayores.html" target="_self" >
			Viaje&nbsp;mundo&nbsp;de&nbsp;los&nbsp;f&oacute;siles
		</a>
	  </li>
        </ul>
      </li>
    </ul>

 <ul >
      <li><a href="reserva.html" target="_self" ><img name="botonera_sec_ofertaformativa03" src="botonera_sec_ofertaformativa-03.png" width="161" height="30" border="0" id="botonera_sec_ofertaformativa-03" alt="" onmouseover="Sobre(3);return true;" onmouseout="Fora(3);return true;" /></a>
      </li>
    </ul>
  </div>
  
</body>
</html>
Bueno gacias por vuestra atención y un saludo a tod@s
  #2 (permalink)  
Antiguo 03/12/2007, 06:31
Avatar de rol2007  
Fecha de Ingreso: mayo-2007
Ubicación: Santiasco CHILE
Mensajes: 300
Antigüedad: 17 años
Puntos: 4
Re: Botonera tipo Acordeon JS
te falta el css
copie codigo y no funciona
__________________
Saludos
desde Chile
  #3 (permalink)  
Antiguo 03/12/2007, 13:17
 
Fecha de Ingreso: noviembre-2007
Ubicación: San Juan de Alicante
Mensajes: 78
Antigüedad: 16 años, 5 meses
Puntos: 7
Re: Botonera tipo Acordeon JS
rol 2007 siento el despiste aki dejo el archivo css que faltaba
Código: 
<!--

.menu{
background-image: url('botonera_sec_ofertaformativa_bar.jpg');
background-repeat: repeat-y
}

.menu ul{
padding:0; 
margin:0;
top: 0px;
left: 0px;
width: 161px;
list-style-type: none;
}

.menu li {
position:relative;
}

.menu a 
{
	text-decoration:none;
	font-family:lucida console;
	font-size:9px;
	color:#666666;
	text-align:right;
	vertical-align:middle;
	padding:3px;
	font-weight:normal;
	font-style:normal;
	display:block;
	margin-right: 10px;
}

.menu a:hover
{
	color:#CC3333;
}

/* hide the drop down menu */
.menu ul li ul, 
.menu ul li ul li ul,
.menu ul li:hover ul li ul 
{
display: none;
}
/* make the drop down menu show  */
.menu ul li:hover ul
{
display:block; 

}
Bueno gracias y haber si me podéis echar una mano
  #4 (permalink)  
Antiguo 03/12/2007, 14:33
Avatar de rol2007  
Fecha de Ingreso: mayo-2007
Ubicación: Santiasco CHILE
Mensajes: 300
Antigüedad: 17 años
Puntos: 4
Re: Botonera tipo Acordeon JS
Código PHP:
<html>
<style>
.menu{
background-image: url('botonera_sec_ofertaformativa_bar.jpg');
background-repeat: repeat-y
}

.menu ul{
padding:0; 
margin:0;
top: 0px;
left: 0px;
width: 161px;
list-style-type: none;
}

.menu li {
position:relative;
}

.menu a 
{
    text-decoration:none;
    font-family:lucida console;
    font-size:9px;
    color:#666666;
    text-align:right;
    vertical-align:middle;
    padding:3px;
    font-weight:normal;
    font-style:normal;
    display:block;
    margin-right: 10px;
    
}

.menu a:hover
{
    color:#CC3333;
}

/* hide the drop down menu */
.menu ul li ul, 
.menu ul li ul li ul,
.menu ul li:hover ul li ul 
{
display: none;
}
/* make the drop down menu show  */
.menu ul li:hover ul
{
display:block; 

}
</style>
<script  type="text/javascript">
 

function Sobre(k) {
 if (document.images) 
  eval('document.botonera_sec_ofertaformativa0'+k+'.src="botonera_sec_ofertaformativa-0'+k+'-r.png"');
}

function Fora(k) {
 if (document.images) 
  eval('document.botonera_sec_ofertaformativa0'+k+'.src="botonera_sec_ofertaformativa-0'+k+'.png"');
}
 
</script>
 
</head>
<body bgcolor="#ffffff" >
  
  <div class="menu vert">
    <ul>

      <li>
      </li>
    </ul>
    <ul>
      <li>
<img name="botonera_sec_ofertaformativa01" src="botonera_sec_ofertaformativa-01.png" width="161" height="45" border="0" id="botonera_sec_ofertaformativa-01" alt="" onmouseover="Sobre(1);return true;" onmouseout="Fora(1);return true;"  />
        <ul>
      <li>
        <a href="lapedrera.html" target="_self">

            La&nbsp;pedrera&nbsp;(Bigastro)
        </a>
        <a href="casatapena.html" target="_self"  >
            Casa&nbsp;T&aacute;pena&nbsp;(Onil)
        </a>
        <a href="dunasguardamar.html" target="_self"  >
            Dunas&nbsp;de&nbsp;Guardamar
        </a>

        <a href="parqueelche.html" target="_self"  >
            Parque&nbsp;municipal&nbsp;Elche
        </a>
        <a href="bahia.html" target="_self">
            Bah&iacute;a&nbsp;Alicante
        </a>
        <a href="tranvia.html" target="_self" >
            Tranvia&nbsp;Ambiental
        </a>

        <a href="terranatura.html" target="_self" >
            Terra&nbsp;Natura
        </a>
        <a href="viajefosiles.htm" target="_self"  >
            Viaje&nbsp;mundo&nbsp;de&nbsp;los&nbsp;f&oacute;siles
        </a>
        <a href="descubreparques.html" target="_self"  >

            Descubre&nbsp;los&nbsp;parques
        </a>

      </li>
    </ul>
      </li>
    </ul>
 <ul >
      <li><img name="botonera_sec_ofertaformativa02" src="botonera_sec_ofertaformativa-02.png" width="161" height="55" border="0" id="botonera_sec_ofertaformativa-02" alt="" onmouseover="Sobre(2);return true;" onmouseout="Fora(2);return true;"  />

        <ul>
      <li>
            <a href="benialtea.html" target="_self"  >
            Isla&nbsp;Benidorm&nbsp;-&nbsp;Altea
        </a>
        <a href="xixona.html" target="_self"  >
            Coves&nbsp;Canelobre
        </a>

        <a href="tabarca.html" target="_self" >
            Tabarca
        </a>
        <a href="ibionil.html" target="_self" >
            Ibi-Sierra&nbsp;Onil
        </a>
        <a href="guardamar.html" target="_self" >
            Guardamar
        </a>
        <a href="elche.html" target="_self" >

            Elche
        </a>
        <a href="rojales.html" target="_self" >
            Rojales&nbsp;-&nbsp;La&nbsp;Pedrera
        </a>
        <a href="terranaturamayores.html" target="_self" >
            Terra&nbsp;Natura
        </a>

        <a href="viajefosilesmayores.html" target="_self" >
            Viaje&nbsp;mundo&nbsp;de&nbsp;los&nbsp;f&oacute;siles
        </a>
      </li>
        </ul>
      </li>
    </ul>

 <ul >
      <li><a href="reserva.html" target="_self" ><img name="botonera_sec_ofertaformativa03" src="botonera_sec_ofertaformativa-03.png" width="161" height="30" border="0" id="botonera_sec_ofertaformativa-03" alt="" onmouseover="Sobre(3);return true;" onmouseout="Fora(3);return true;" /></a>
      </li>
    </ul>
  </div>
  
</body>
</html> 



no puedo encontrar el problema para que IE no funcione lo probe en opera y mozilla todo bien.....no se que puede ser....


__________________
Saludos
desde Chile
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:39.