Problema con el cambio a internet explorer

breakervans · #1 (**permalink**) 16/03/2010, 09:15

Hola, en mi web puse un sistema de cambiar la imágen al pasar el ratón por encima, y cuando lo miro en el internet explorer en lugar del firefox que es el que utilizo solo se ve la primera de las 6 imagenes y su correspondiente al pasar el ratón por encima. Este es el código html:

Código HTML:

<html>
<head>

  <title>Liquid Dreams</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<link rel="shortcut icon" href="objetos/favicon.ico" type="image/x-icon" /> 
</head>
<body>
<img src="objetos/cabecera.jpg" alt=""
<br>
<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">
<span style="font-family: Frakturika Spamless; color: #FFFFFF" font="frakturika spamless">
<a href="index.html">
<img src="objetos/noticias1.png"
                id="img1"
                onmouseover="img1.src='objetos/noticias2.png'"
                onmouseout="img1.src='objetos/noticias1.png';"
</a><br>
<a href="conciertos.html"
<img src="objetos/conciertos1.png"
                id="img"               
								onmouseover="img.src='objetos/conciertos2.png'"
                onmouseout="img.src='objetos/conciertos1.png';"
</a><br>
<a href="fotos.html"
<img src="objetos/fotos1.png"
                id="img2"
                onmouseover="img2.src='objetos/fotos2.png'"
                onmouseout="img2.src='objetos/fotos1.png';"
</a><br>
<a href="grupo.html"
<img src="objetos/grupo1.png"
                id="img3"
                onmouseover="img3.src='objetos/grupo2.png'"
                onmouseout="img3.src='objetos/grupo1.png';"
</a><br>
<a href="links.html"
<img src="objetos/links1.png"
                id="img4"
                onmouseover="img4.src='objetos/links2.png'"
                onmouseout="img4.src='objetos/links1.png';"
</a><br>
</font></span>
</div>
<div class="columna_derecha">
<img src="objetos/noticias.png">
<br>
<span style="color: #000000";>

<img src="objetos/barra.png">
</div>
</body>

</html>

jmdz · #2 (**permalink**) 16/03/2010, 13:52

En los onmouseover y onmouseout o usas document.getElementById() o usa directamente this.

Ejemplo:

Código HTML:

Ver original<a href="index.html">
<img src="objetos/noticias1.png"
                id="img1"
                onmouseover="document.getElementById('img1').src='objetos/noticias2.png';"
                onmouseout="this.src='objetos/noticias1.png';"
/>
</a><br>

Suerte.

PS: Y de paso acordate de cerrar las imágenes "/>".

breakervans · #3 (**permalink**) 16/03/2010, 14:26

Muchas gracias, probé con todo lo que me dijiste. La mala noticia es que aunque en el Mozilla sigue funcionando en el internet explorer no cambió nada, solo se ve la primera y su correspondiente. Gracias igualmente

jmdz · #4 (**permalink**) 16/03/2010, 15:10

¿cerraste las etiquetas de las imágenes?

breakervans · #5 (**permalink**) 18/03/2010, 09:12

si, con />

flpms · #6 (**permalink**) 18/03/2010, 11:22

porque vos no intenta hacer esto con addEventListener??
intentas hacer lo Javascript con separado de la etiqueta. solamiente en la etiqueta script. asin vos puede hacer com getElementsByTagName(img) y con lo clique modificar lo indice de la etiqueta.

breakervans · #7 (**permalink**) 18/03/2010, 11:24

Gracias

¿Como se hace eso?

flpms · #8 (**permalink**) 18/03/2010, 11:49

Yo necessito de más detalles de lo desea hacer.
Puede describir mejor???

breakervans · #9 (**permalink**) 18/03/2010, 18:02

Es solo conseguir que la página se vea correctamente en Internet Explorer, ya que en el Mozilla funciona perfectamente. En Internet Explorer el fallo que hay es que en la serie de imágenes que incluí en el código anterior (Las que al pasar el ratón por encima cambian) sólo se muestra la primera.

flpms · #10 (**permalink**) 19/03/2010, 06:15

puede poner todo lo codigo. Inclujo lo CSS?

breakervans · #11 (**permalink**) 19/03/2010, 06:41

El código completo:

Código HTML:

<html>
<head>

  <title>Liquid Dreams</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<link rel="shortcut icon" href="objetos/favicon.ico" type="image/x-icon" /> 
  <script type="text/javascript">
function setFocus(aField) {
document.forms[0][aField].focus();
}
function isAnEmailAddress(aTextField) {
if (document.forms[0][aTextField].value.length<5) {
return false;
}
else if (document.forms[0][aTextField].value.indexOf("@") < 1) {
return false;
}
else if (document.forms[0][aTextField].value.length -
document.forms[0][aTextField].value.indexOf("@") < 4) {
return false;
}
else { return true; }
}
function isEmpty(aTextField) {
if ((document.forms[0][aTextField].value.length==0) ||
(document.forms[0][aTextField].value==null)) {
return true;
}
else { return false; }
}
function validate() {
if (isEmpty("email")) {
alert("Que email quieres que registremos?.");
setFocus("email");
return false;
}

if (!isAnEmailAddress("email")) {
alert("El e-mail es inválido.");
setFocus("email");
return false;
}
return true;
}
  </script>
<meta name="google-site-verification" content="Leld9ktEpsyxqWQVewiGzqg8fKtRQXt1hiRaeHSn8xA" />
</head>
<body>
<img src="objetos/cabecera.jpg" alt=""
<br>
<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">
<font size=3 color=#FFFFFF>
<a href="index.html">
<img src="objetos/noticias1.png"
                id="img1"
                onmouseover="this.src='objetos/noticias2.png'"
                onmouseout="this.src='objetos/noticias1.png';"
/>
</a><br>
<a href="conciertos.html"
<img src="objetos/conciertos1.png"
                id="img"               
								onmouseover="this.src='objetos/conciertos2.png'"
                onmouseout="this.src='objetos/conciertos1.png';"
/>
</a><br>
<a href="media.html"
<img src="objetos/media1.png"
                id="img2"
                onmouseover="this.src='objetos/media2.png'"
                onmouseout="this.src='objetos/media1.png';"
/>
</a><br>
<a href="grupo.html"
<img src="objetos/grupo1.png"
                id="img3"
                onmouseover="this.src='objetos/grupo2.png'"
                onmouseout="this.src='objetos/grupo1.png';"
/>
</a><br>
<a href="links.html"
<img src="objetos/links1.png"
                id="img4"
                onmouseover="this.src='objetos/links2.png'"
                onmouseout="this.src='objetos/links1.png';"
/>
</a><br>
<br><br><br><br>
¡Suscribe tu email!<br>
<form action="suscribir.php" method="post" onsubmit="return validate()">
<input name="email" size="20" type="text"><br>
<input value="Suscribir" type="submit">
</font>
</div>
<div class="columna_derecha">
<img src="objetos/noticias.png">
<br>
<font size=3 color=#FFFFFF>
<br>
<img src="objetos/barra.png">
</div>
</body>

</html>

el .css:

Código HTML:

#cabecera     {background-color: black   }
#navegacion li {float:left}
#contenido {background-color: }
#global {width:1054px ; margin: 4px auto }
body {text-align: center}
body {background-color: #000000 ; background-image: url(objetos/fondo.png) ; background-position: center center ; background-repeat: repeat-y ;  height:100%; }
a {color: White; text-decoration: none}
a:visited {color: DimGray; text-decoration: none}
#news{color:white;font-style:forte} 
#navegacion {background-color: red ; border:  1px solid ; height:20px}
img {border-style: none}
#caja_izq {width: 850px;
margin: 20px auto;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 400px;
float: left;
padding: 20px;
}

flpms · #12 (**permalink**) 19/03/2010, 10:10

Perdon por la demora estoy en mi trabajo ahora.
Yo voy dicir uns cosa necessito saber qual version del IE vos utiliza.
Tambien qual son los tamaños de las images.

PS: Yo hizó uno teste en los navegadores en ambos se fue correctamente.

breakervans · #13 (**permalink**) 19/03/2010, 14:12

Uso el 8, pero lo he mirado desde diversos ordenadores y desde ninguno va. No se la versión de los otros pero puede que sea la misma