Foros del Web » Programando para Internet » Javascript »

Por qué sólo me funcionan los eventos en IE?

Estas en el tema de Por qué sólo me funcionan los eventos en IE? en el foro de Javascript en Foros del Web. Buenas, Le estoy dando vueltas a un tema, y por más pruebas que voy haciendo no le encuentro explicación. Resulta que tengo el siguiente código: ...
  #1 (permalink)  
Antiguo 07/11/2011, 07:47
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Por qué sólo me funcionan los eventos en IE?

Buenas,
Le estoy dando vueltas a un tema, y por más pruebas que voy haciendo no le encuentro explicación.

Resulta que tengo el siguiente código:
<ul class=pagination>
<li><a href="#" rel="0" id="durstC"><span id="durst" onClick='clickOpcions(id)' onMouseOver='over(id+"C")' onMouseOut='out(id+"C")'>UN TEXTO</a></li>
<li><a href="#" rel="1" id="setemaC"><span id="setema" onClick='clickOpcions(id)' onMouseOver='over(id+"C")' onMouseOut='out(id+"C")'><img src="images/LogoSetema.png"></span></a></li>
</ul>

La primera linea funciona a la perfección en todos los navegadores.
La segunda linea, sólo funciona en IE.
La única diferencia entre ambas lineas, es que una visualiza texto y la otra imagen.

Alguien sabe qué pasa? Ningún navegador lanza mensaje de error.

Muchas gracias
  #2 (permalink)  
Antiguo 07/11/2011, 09:53
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 17 años, 1 mes
Puntos: 26
Respuesta: Por qué sólo me funcionan los eventos en IE?

Prueba cerrando bien el primer <span>
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #3 (permalink)  
Antiguo 07/11/2011, 17:03
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Por qué sólo me funcionan los eventos en IE?

Gracias por tu respuesta. Desgraciadamente para mi el problema no está en haber cerrado mal el span, ese error lo he cometido al intentar simplificar el código para exponerlo aquí.
Y precisamente, los eventos responden en la primera línia, cuando pongo texto, y no responden cuando son imágenes.

He puesto una tabla en lugar de líneas, y el caso es el siguiente, sobre texto todo funciona de perlas, pero sobre imagen,, no me funciona en ningún navegador a excepción de IE.
  #4 (permalink)  
Antiguo 07/11/2011, 18:36
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 17 años, 1 mes
Puntos: 26
Respuesta: Por qué sólo me funcionan los eventos en IE?

ayudaría si pones el código javascript
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #5 (permalink)  
Antiguo 08/11/2011, 15:30
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Por qué sólo me funcionan los eventos en IE?

Buenas y de nuevo gracias por responder.

Para ver exactamente lo que pasa, si dispones de un momento, he colgado el código entero en el siguiente enlace: http://www.tepui.cat/armtex/Textil.html.
Si usas Internet Explorer verás exactamente lo que quiero, es decir, el efecto MouseOver, MouseOut y onClick, en las opciones que aparecen a la izquierda.
Si usas cualquier otro navegador, verás el problema que tengo, que no se selecciona ninguna opción, ni se da el mouseOver, ni nada de nada.

El código de la página Textil.html es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Armtex: empresa especializada en telas y perfiles para el sector de publicidad</title>
<meta name="description" content="Place your description here">
<meta name="keywords" content="impresoras digitales, perfiles de aluminio, materiales biodegradables, accesorios para telas, tejidos para impresoras digitales">
<meta name="author" content="Tepui.cat - Marta Blasco">
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/maxheight.js"></script>
<script type="text/javascript" src="js/maxheight.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>


<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie6_script_other.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript">
function clickOpcions(id) {
document.getElementById("durstC").style.background Image="url(images/Buto.png)";
document.getElementById("setemaC").style.backgroun dImage="url(images/Buto.png)";
document.getElementById("petronaphteC").style.back groundImage="url(images/Buto.png)";
switch(id) {
case "durst":
document.getElementById("faded").style.backgroundI mage = "url(images/Durst.jpg)";
document.getElementById("linia").style.display='bl ock';
document.getElementById("enllac").href = "http://www.durst.it/durst-phototechnik-ag/home/textile-printing-kappa.html";
break;
case "setema":
document.getElementById("faded").style.backgroundI mage = "url(images/Setema.jpg)";
document.getElementById("linia").style.display='bl ock';
document.getElementById("enllac").href = "http://www.setema.com/";
break;
case "petronaphte":
document.getElementById("faded").style.backgroundI mage = "url(images/Petronaphte.jpg)";
document.getElementById("linia").style.display='bl ock';
document.getElementById("enllac").href = "http://www.petronaphte.com/lub/splashscreen/NT0007C0DE.htm?readform";
break;
}
document.getElementById(id+"C").style.backgroundIm age="url(images/ButoSel.png)";
document.getElementById('text').innerHTML = "";
}

</script>
</head>
<body id="page1">
<div class="tail-top" onload="new ElementMaxHeight();">
<!-- header -->
<header>
<div class="container">
<div class="header-box">
<div class="left">
<div class="right">
<nav>
<ul>
<li><a href="Index.html">INICIO</a></li>
<li><a href="Publicitat.html">PUBLICIDAD</a></li>
<li class="current"><a href="Textil.html">TEXTIL</a></li>
</ul>
</nav>
<h1><a href="Index.html"><span>ARMTEX<br>
</span></a></h1>
</div>
</div>
</div>
</div>
</header>
<!-- content -->
<section id="content">
<div class="container">
<div id="faded">
<ul class="slides0">
<li><a href="#"><span><span id=text>Impresora digital textil de alta velocidad<br>
Maquinaria para vaporización, fijación y lavar tejidos<br>
Ensimaje textiles<br>
</span></span></a></li>
</ul>
<ul class="slides" id=linia style="display:none">
<li><a id=enllac href="#" class="new_window"><span><span>MÁS INFORMACIÓN</span></span></a></li>
</ul>
<ul class=pagination>
<li><a href="#" rel="1" id="durstC"><span id="durst" onClick='clickOpcions(id)'><img src="images/LogoDurst.png"></span></a></li>
<li><a href="#" rel="1" id="setemaC"><span id="setema" onClick='clickOpcions(id)'><img src="images/LogoSetema.png"></span></a></li>
<li><a href="#" rel="2" id="petronaphteC"><span id="petronaphte" onClick='clickOpcions(id)'><img src="images/LogoPetronaphte.png"></span></a></li>
</ul>
</div>
</div>
</section>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="inside">Website diseñado por <a href="http://www.tepui.cat" class="new_window">Tepui</a>.cat</div>
</div>
</footer>
</body>
</html>


Para no cargar con todo el código, te pongo la parte de la hoja de estilos que afecta a los botones:
#faded ul.pagination {list-style:none;padding:0;margin:0}
#faded ul.pagination li {padding:5px 0 0 3px}
#faded ul.pagination li a {width:270px;height:50px;background-color:#f2f2f2;color:#ffffff;text-decoration:none;display:block;background:url(../images/Buto.png) no-repeat left top}
#faded ul.pagination li a:hover {background:url(../images/ButoOver.png) no-repeat left top}
#faded ul.pagination li a span {font-size:26px;line-height:1.2em;display:block;padding-top:5px;padding-left:0px}

Ojalá puedas ver que es lo que estoy haciendo mal, yo ya no sé que más probar.

Gracias
  #6 (permalink)  
Antiguo 08/11/2011, 17:24
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 6 meses
Puntos: 48
Respuesta: Por qué sólo me funcionan los eventos en IE?

Para empezar el ul con clase "slides0" está quedándose encima del resto, por eso no se se ejecuta el "onclick", porque haces "click" en ese "ul".
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #7 (permalink)  
Antiguo 08/11/2011, 17:29
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Por qué sólo me funcionan los eventos en IE?

Gracias por tu rápida respuesta, pero no lo entiendo.

Tengo el div="faded" con tres ul:

- <ul class = slides0> ...
- <ul class = slides> ...
- <ul class = pagination> ...

por qué el primero se queda por encima de los otros, no son independientes?

Un saludo
  #8 (permalink)  
Antiguo 08/11/2011, 17:34
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 6 meses
Puntos: 48
Respuesta: Por qué sólo me funcionan los eventos en IE?

Es que está posicionado encima de los otros y como tiene padding, eso también es parte de él.
En la línea 202 de style.css cambia el padding-left:250px por margin-left:250px en la regla de "#faded ul.slides0 li a".
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #9 (permalink)  
Antiguo 09/11/2011, 07:56
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Por qué sólo me funcionan los eventos en IE?

Muchísimas gracias por tu aporte. No te puedes ni imaginar las horas que llevaba atrancada. Ahora la web funciona, pero me queda mucho que aprender, para empezar, estudiar la diferencia entre padding i margin.

Un saludo y de nuevo, muchas gracias

Etiquetas: eventos, funcion, funcionan
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




La zona horaria es GMT -6. Ahora son las 22:51.