Ver Mensaje Individual
  #5 (permalink)  
Antiguo 08/11/2011, 15:30
Avatar de kambiz_marta
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