Foros del Web » Programando para Internet » Javascript »

Incompatible firefox

 Estas en el tema de Incompatible firefox en el foro de Javascript en Foros del Web. Hola, tengo un scrip en php que genera una página html: Bien, pues hace una tabla donde cada celda represanta una foto, si hay una ...
  #1 (permalink)  
Antiguo 25/08/2008, 02:37
 
Fecha de Ingreso: diciembre-2007
Mensajes: 149
Antigüedad: 17 años, 1 mes
Puntos: 1
Incompatible firefox
Hola, tengo un scrip en php que genera una página html:

Bien, pues hace una tabla donde cada celda represanta una foto, si hay una foto esa celda se pone en verde mas clarito y si pasas el raton por encima se carga la imagen, el problema es que en firefox no m va pero en IE funciona perfectamente, le estado dando vuelta y no se porque en firefox no hace nada, a ver si alguien me puede ayudar diciendome donde está el error, os dejo el código por separado de la cuadricula y el JS:

JS QUE CAMBIA LA FOTO Y EL COLOR DE LA CELDA:

Código HTML:
<script language="JavaScript" type="text/javascript">
	function cambiar_color_over_gal(celda,color,objeto,imagen){
		document.getElementById(celda).style.backgroundColor=color;
		/*alert('Imagen cargada: '+imagen);*/
		elemento_imagen = new Image(286,160);
		document.getElementById(objeto).src = "admin/subidas/fotos/imagenes/extra/"+imagen;
		/*alert('Imagen cargada: '+elemento_imagen);*/
	}
	function cambiar_color_out_gal(celda,color){
		document.getElementById(celda).style.backgroundColor=color;
	}
</script>
HTML DE LA CELDA QUE LLAMA AL JS:
Código HTML:
 <!-- MENU FOTOS -->
        <table width="0" border="0" cellspacing="0" cellpadding="0" class="tablaMenuGaleria">
          <tr>							
            <td id="celdaGal_1" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_1','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_1','#CCE476')">&nbsp;</td>
            <td id="celdaGal_2" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_2','#FFFFFF','foto1','churumbel(1).jp')" onMouseOut="cambiar_color_out_gal('celdaGal_2','#CCE476')">&nbsp;</td>
            <td id="celdaGal_3" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td id="celdaGal_4" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_4','#FFFFFF','foto1','sin_título-1.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_4','#CCE476')">&nbsp;</td>
            <td id="celdaGal_5" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_5','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_5','#CCE476')">&nbsp;</td>
      </tr>                                                                                                              
          <tr>			
            <td id="celdaGal_6" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_6','#FFFFFF','foto1','churumbel(2).jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_6','#CCE476')">&nbsp;</td>
            <td id="celdaGal_7" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_7','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_7','#CCE476')">&nbsp;</td>

            <td id="celdaGal_8" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td id="celdaGal_9" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>
          <tr>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>

              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>
          <tr>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>

          </table> <!-- FIN MENU FOTOS -->
Última edición por sk1one; 25/08/2008 a las 02:40 Razón: Ortografía
  #2 (permalink)  
Antiguo 25/08/2008, 03:54
 
Fecha de Ingreso: agosto-2008
Mensajes: 218
Antigüedad: 16 años, 5 meses
Puntos: 7
Respuesta: Incompatible firefox
¿has probado que en vez de cargarse una imagen, que el fondo de la celda sea esa imagen?
  #3 (permalink)  
Antiguo 25/08/2008, 06:21
 
Fecha de Ingreso: abril-2007
Mensajes: 37
Antigüedad: 17 años, 9 meses
Puntos: 0
Respuesta: Incompatible firefox
Realmente no se ni como te puede funcionar en IE xD
En primer lugar nunca llega a existir un elemento con id="foto1". Por lo tanto no puedes modificarle el "src" aqui:
document.getElementById(objeto).src = "admin/subidas/fotos/imagenes/extra/"+imagen;

Porque la variable "objeto" => "foto1"

Y después se crea un "elemento_imagen" que no sirve para nada absolutamente xD

"elemento_imagen = new Image(286,160);"

Has copiado todo en este post? o te dejaste parte del código?

Un saludo
  #4 (permalink)  
Antiguo 25/08/2008, 07:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 218
Antigüedad: 16 años, 5 meses
Puntos: 7
Respuesta: Incompatible firefox
creo que deberías hacerlo así:

en Firefox me parece que con esto vale:
#id td{background-color:verde_claro}
#id td:hover{background:url("imagen");display:block}

en IE no funcionará, pero con un apaño...

#id td.cubierto{bacground:url("imagen");display:block}

solo tienes que asignar la class con javascript cuando el puntero esté sobre él.

sfHover = function() {
var sfEls = document.getElementById("id").getElementsByTagName ("TD");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" cubierto";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" cubierto\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

viene reflejado en este enlace:
http://www.htmldog.com/articles/suckerfish/dropdowns/
  #5 (permalink)  
Antiguo 25/08/2008, 07:19
 
Fecha de Ingreso: diciembre-2007
Mensajes: 149
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Incompatible firefox
Si pues en IE funciona perfectamente, tiene fallos porque soy nuevo en JS y lo hice a mano sin copipaste, voya probar eso no s em habia ocurrido con css gracias os comentare ^^
  #6 (permalink)  
Antiguo 25/08/2008, 08:05
Avatar de GatorV
$this->role('moderador');
  
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 7 meses
Puntos: 2135
Respuesta: Incompatible firefox
Tema trasladado a Javascript.
  #7 (permalink)  
Antiguo 25/08/2008, 08:53
 
Fecha de Ingreso: diciembre-2007
Mensajes: 149
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Incompatible firefox
Bien perdonadme pero s eme olvido deciros que lo que hace el js es cambiar el src de una imagen:

Código HTML:
 <td height="100%" colspan="2" valign="top" class="celdaFoto"><img name="foto1" id="fotol" src="admin/subidas/dsadsada/imagenes/x-click-but01.gif" width="286" height="228" /></td>
Sorry ahora si lo entenderan algunos, dios es que hice este scrip hace ya 2 semanas y nolo recuerdo bien xD
  #8 (permalink)  
Antiguo 25/08/2008, 09:55
 
Fecha de Ingreso: diciembre-2007
Mensajes: 149
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Incompatible firefox
Bien voy a hacer un resumen para el que tenga el mismo problema y además de que no e realizado bien la pregunta, gracias por vuestras respuesta pero estoy echo un lio y lo entiendo mejor asi:

JS ( cambia el src de la imagen kon id=foto1 ):

Código HTML:
<script language="JavaScript" type="text/javascript">
	function cambiar_color_over_gal(celda,color,objeto,imagen){
		document.getElementById(celda).style.backgroundColor=color;
		/*alert('Imagen cargada: '+imagen);*/
		//elemento_imagen = new Image(286,160);
		document.getElementById(objeto).src = "admin/subidas/promociones/imagenes/extra/"+imagen;
		/*alert('Imagen cargada: '+elemento_imagen);*/
	}
	function cambiar_color_out_gal(celda,color){
		document.getElementById(celda).style.backgroundColor=color;
	}
</script>
IMG que tiene el id=foto1, este se verá afectado por lo cambios del JS: (como veis está en una celda)

Código HTML:
<td height="100%" colspan="2" valign="top" class="celdaFoto"><img name="foto1" id="fotol" src="admin/subidas/promociones/imagenes/x-click-but01.gif" width="286" height="228" /></td>

CELDAS que al pasar el raton mandan variables a la función del JS para que:

1- cambien el colo de su misma celda.
2- cambien el src del elemento foto1 del documento html.
Código HTML:
<!-- MENU FOTOS -->
        <table width="0" border="0" cellspacing="0" cellpadding="0" class="tablaMenuGaleria">
          <tr>							
            <td id="celdaGal_1" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_1','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_1','#CCE476')">&nbsp;</td>
            <td id="celdaGal_2" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_2','#FFFFFF','foto1','churumbel(1).jp')" onMouseOut="cambiar_color_out_gal('celdaGal_2','#CCE476')">&nbsp;</td>
            <td id="celdaGal_3" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td id="celdaGal_4" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_4','#FFFFFF','foto1','sin_título-1.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_4','#CCE476')">&nbsp;</td>
            <td id="celdaGal_5" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_5','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_5','#CCE476')">&nbsp;</td>
      </tr>                                                                                                              
          <tr>			
            <td id="celdaGal_6" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_6','#FFFFFF','foto1','churumbel(2).jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_6','#CCE476')">&nbsp;</td>
            <td id="celdaGal_7" class="celdasMenuGaleriaExiste"  height="16" width="17" onMouseOver="cambiar_color_over_gal('celdaGal_7','#FFFFFF','foto1','banner.jpg')" onMouseOut="cambiar_color_out_gal('celdaGal_7','#CCE476')">&nbsp;</td>

            <td id="celdaGal_8" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td id="celdaGal_9" class="celdasMenuGaleria"  height="16" width="17" >&nbsp;</td>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>
          <tr>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>

              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>
          <tr>
            <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
              <td class="celdasMenuGaleria"  height="16" width="17">&nbsp;</td>
      </tr>

          </table> <!-- FIN MENU FOTOS -->


Problema:
En IE funciona y en Firefox No:

Resultado: :__( toy jodido :( ayuda pleese amejoras mi código, me inxao a poner bien comillas usar otras propiedades ect... y nada, el código que me has dao compi no lo entiendo tio :(
  #9 (permalink)  
Antiguo 26/08/2008, 01:37
 
Fecha de Ingreso: diciembre-2007
Mensajes: 149
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Incompatible firefox
Bien pues al final lo saqué con un par de paciencia XD y lectura de manuales:

Lo que yo no sabia es que se guardaba un array con las imagenes del documento html actual, y que luego podria ser utilizado. Quizas en IE si permite acceder a un elemento de la página mediante:

Código HTML:
document.getElementById(objeto).src = "admin/subidas/promociones/imagenes/extra/"+imagen;
Pero a Firefox por lo que se ve no le gusta, el script estaba fenomeno y es claro de entender, pero le fallaba eso, así que ví la posibilidad de acceder a las imagenes mediante esta forma:

Código HTML:
document.images[objeto].src = "admin/subidas/promociones/imagenes/extra/"+imagen;
Tanto a IE como a Firefox así le mola, así que quedó solucionado el problema, si alguien le pasa esto ya sabe que tiene que hacer dejo mi script para que otros lo utilicen:

Código HTML:
<script language="JavaScript" type="text/javascript">

	function cambiar_color_over_gal(celda,color,objeto,imagen){
		document.getElementById(celda).style.backgroundColor=color;
		/*alert('Imagen cargada: '+imagen);*/
		//elemento_imagen = new Image(286,160);
		//document.getElementById(objeto).src = "directorio_imagenes/"+imagen;
			document.images[objeto].src = "directorio_imagenes/"+imagen; 
		/*alert('Imagen cargada: '+elemento_imagen);*/
	}
	function cambiar_color_out_gal(celda,color){
		document.getElementById(celda).style.backgroundColor=color;
	}

</script>
Celda: la celda que hace que se ilumine al pasar el boton sobre ella.
Color: el color en hexadecimal que queremos para la celda que se ilumina.
Objeto: la imagen dentro del documento html que establecemos como cargador de las demás imagenes.
Imagen: el nombre de la imagen que será enviada al cargador.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:23.