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érmica</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)"; }
}