Foros del Web » Programando para Internet » Javascript »

Por qué no funciona este código en IE8 y en el resto de navegadores sí?

Estas en el tema de Por qué no funciona este código en IE8 y en el resto de navegadores sí? en el foro de Javascript en Foros del Web. Buenas, Llevo horas peleándome y no hay manera de ver por dónde anda el error. Resulta que estoy diseñando una web y la voy probando ...
  #1 (permalink)  
Antiguo 23/11/2011, 03:54
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 5 meses
Puntos: 0
Por qué no funciona este código en IE8 y en el resto de navegadores sí?

Buenas,
Llevo horas peleándome y no hay manera de ver por dónde anda el error.
Resulta que estoy diseñando una web y la voy probando en Safari, Mozilla, IE8 y Chrome. La web funciona excepto con IE8.

Explico que hace la web. En una celda de una tabla, tengo una lista con 13 opciones. Cada linea tiene implementados los eventos onClick, onMouseOver, onMouseOut, que básicamente sirven para cambiar el fondo de cada opción según su estado, activo, over, y out. El problema está que en IE8, si pulso la 5ª opción, se ejecutan los 3 eventos para la opción 5, la 4, la 3, la 2 y la 1, y finalmente es como si siempre pulsaras la primera opción.
No le veo ninguna explicación. Agradeceré cualquier ayuda.

Muchas gracias de antemano y seguidamente copio el código.

- Celda con las opciones del menú comentadas:
<td width=270>
<ul class="pagination" id=opcions>
<li><a href="#" rel="0" id="camisetasC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="camisetas" onClick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idCam>Camisetas</span></a></li>
<li><a href="#" rel="1" id="polosC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="polos" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idPol>Polos</span></a></li>
<li><a href="#" rel="2" id="sudaderasC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="sudaderas" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idSud>Sudaderas</span></a></li>
<li><a href="#" rel="3" id="camisasC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="camisas" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idCami>Camisas</span></a></li>
<li><a href="#" rel="4" id="pantalonesC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="pantalones" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idPan>Pantalones</span></a></li>
<li><a href="#" rel="5" id="polaresC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="polares" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idPola>Polares</span></a></li>
<li><a href="#" rel="6" id="jerseysC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="jerseys" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idJer>Jerseys</span></a></li>
<li><a href="#" rel="7" id="altaC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="alta" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idAlt>Alta visibilidad</span></a></li>
<li><a href="#" rel="7" id="workwearC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="workwear" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idWor>Workwear</span></a></li>
<li><a href="#" rel="7" id="parkasC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="parkas" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idPar>Parkas</span></a></li>
<li><a href="#" rel="7" id="uniformeC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="uniforme" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idUni>Uniforme Colegial</span></a></li>
<li><a href="#" rel="7" id="ropaC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="ropa" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idRop>Ropa interior t&eacutermica</span></a></li>
<li><a href="#" rel="7" id="accesoriosC" style="background-image:url('images/Buto.png'); background-position:left top; background-repeat: no-repeat"><span id="accesorios" onclick='clickOpcions(id)' onMouseOver='over(id)' onMouseOut='out(id)'><span id=idAcc>Accesorios</span></a></li>
</ul>
</td>

Y ahora los 3 eventos:
function clickOpcions(id) {
idActiu = id+"C";
document.getElementById("camisetasC").style.backgr oundImage="url(images/Buto.png)";
document.getElementById("camisetasC").style.backgr oundRepeat="no-repeat";
document.getElementById("camisetasC").style.backgr oundPosition="left top";
document.getElementById("polosC").style.background Image="url(images/Buto.png)";
document.getElementById("polosC").style.background Repeat="no-repeat";
document.getElementById("polosC").style.background Position="left top";
document.getElementById("sudaderasC").style.backgr oundImage="url(images/Buto.png)";
document.getElementById("sudaderasC").style.backgr oundRepeat="no-repeat";
document.getElementById("sudaderasC").style.backgr oundPosition="left top";
document.getElementById("camisasC").style.backgrou ndImage="url(images/Buto.png)";
document.getElementById("camisasC").style.backgrou ndRepeat="no-repeat";
document.getElementById("camisasC").style.backgrou ndPosition="left top";
document.getElementById("pantalonesC").style.backg roundImage="url(images/Buto.png)";
document.getElementById("pantalonesC").style.backg roundRepeat="no-repeat";
document.getElementById("pantalonesC").style.backg roundPosition="left top";
document.getElementById("polaresC").style.backgrou ndImage="url(images/Buto.png)";
document.getElementById("polaresC").style.backgrou ndRepeat="no-repeat";
document.getElementById("polaresC").style.backgrou ndPosition="left top";
document.getElementById("jerseysC").style.backgrou ndImage="url(images/Buto.png)";
document.getElementById("jerseysC").style.backgrou ndRepeat="no-repeat";
document.getElementById("jerseysC").style.backgrou ndPosition="left top";
document.getElementById("altaC").style.backgroundI mage="url(images/Buto.png)";
document.getElementById("altaC").style.backgroundR epeat="no-repeat";
document.getElementById("altaC").style.backgroundP osition="left top";
document.getElementById("workwearC").style.backgro undImage="url(images/Buto.png)";
document.getElementById("workwearC").style.backgro undRepeat="no-repeat";
document.getElementById("workwearC").style.backgro undPosition="left top";
document.getElementById("parkasC").style.backgroun dImage="url(images/Buto.png)";
document.getElementById("parkasC").style.backgroun dRepeat="no-repeat";
document.getElementById("parkasC").style.backgroun dPosition="left top";
document.getElementById("uniformeC").style.backgro undImage="url(images/Buto.png)";
document.getElementById("uniformeC").style.backgro undRepeat="no-repeat";
document.getElementById("uniformeC").style.backgro undPosition="left top";
document.getElementById("ropaC").style.backgroundI mage="url(images/Buto.png)";
document.getElementById("ropaC").style.backgroundR epeat="no-repeat";
document.getElementById("ropaC").style.backgroundP osition="left top";
document.getElementById("accesoriosC").style.backg roundImage="url(images/Buto.png)";
document.getElementById("accesoriosC").style.backg roundRepeat="no-repeat";
document.getElementById("accesoriosC").style.backg roundPosition="left top";

document.getElementById("imatgeProductes").src = "images/full" + id +".jpg";

document.getElementById("faded").style.backgroundP osition = "250px 0px";
document.getElementById("faded").style.backgroundR epeat = "no-repeat";
document.getElementById(id+"C").style.backgroundIm age="url(images/ButoSel.png)";
}

function over(id) {
if (id+"C" != idActiu) {
alert("Over id+c: " + id + "C idActiu: " + idActiu);
document.getElementById(id+"C").style.backgroundIm age="url(images/ButoOver.png)"; }
}

function out(id) {
if (id+"C" != idActiu) {
alert("Out id+c: " + id + "C idActiu: " + idActiu);
document.getElementById(id+"C").style.backgroundIm age="url(images/Buto.png)"; }
}
  #2 (permalink)  
Antiguo 23/11/2011, 07:31
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Por qué no funciona este código en IE8 y en el resto de navegadores sí?

intenta:

var idActiu = id+"C";

Organiza tú código, así es más fácil ayudarte.
Utiliza las herramientas del foro como Highlight

te recomiendo utilizar CSS para los rollovers
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: funcion, ie8, navegadores, resto
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 14:00.