Foros del Web » Programando para Internet » Jquery »

jquery: background image, explorer y su madre

Estas en el tema de jquery: background image, explorer y su madre en el foro de Jquery en Foros del Web. Pues resulta que cuando creí tener mi web casi acabada, decido ver cómo quedaría en ese huevo frito virtual llamado internet explorer, y entre otras ...
  #1 (permalink)  
Antiguo 29/04/2012, 04:00
 
Fecha de Ingreso: abril-2012
Mensajes: 63
Antigüedad: 10 años, 2 meses
Puntos: 2
jquery: background image, explorer y su madre

Pues resulta que cuando creí tener mi web casi acabada, decido ver cómo quedaría en ese huevo frito virtual llamado internet explorer, y entre otras atrocidades -he visto cosas que no creeríais- hay una que no consigo resolver.

Veréis, tengo unos botones para formularios que hice yo. Creé dos imágenes, una de las cuales es para cuando el botón se pulsa. Es algo tan sencillo como cuando se hace click en un botón se carga la segunda imagen. Pues esto, que funciona a la primera en firefox, en explorer no hay manera.

Os pongo los retales de código. Primero el php:

Código PHP:
Ver original
  1. <div class="crearBuscarFicha">
  2.  
  3. <form class="formularioLateral" action="." method="post">
  4.  <label for="nombreProducto">Crear Ficha:</label><br />
  5.  <input type ="text" class="campoFormularioLateral" size="19" name="nombreProducto" id="nombreProducto" /><br />
  6.  <input type="submit" class="botonFormulario" name="crearFicha" value="Crear" />
  7.  
  8.  </form>
  9. </div>

Luego el css:

Código CSS:
Ver original
  1. .botonFormulario{
  2.     margin-top: 15px;
  3.     background: #c1dbc2 url(/imagenes/web/botonEnviar.png) no-repeat center center;
  4.     width: 79px;
  5.     height: 37px;
  6.     border-bottom: 2px solid grey;
  7.  
  8. }

Y por último el jquery:

Código Javascript:
Ver original
  1. $('.botonFormulario').click(function(){
  2. $(this).css({"background":"#c1dbc2 url(/imagenes/web/botonEnviarActivado.png) no-repeat center center"});
  3. });

¿Alguien me puede echar una mano?
  #2 (permalink)  
Antiguo 29/04/2012, 08:02
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 11 años, 3 meses
Puntos: 192
Respuesta: jquery: background image, explorer y su madre

¿Y por qué no:

Código CSS:
Ver original
  1. .botonFormulario:active{
  2.     background: #c1dbc2 url(/imagenes/web/botonEnviarActivado.png) no-repeat center center;
  3. }

?

Ejemplo:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset=utf-8 />
  3. <title>JS Bin</title>
  4.   button{
  5.     background : url(http://placedog.com/100/50);
  6.     width:100px;
  7.     height:50px;
  8.   }
  9.   button:active{
  10.     background : url(http://placekitten.com/100/50);
  11.   }
  12. </head>
  13.   <button>Click</button>
  14. </body>
  15. </html>

Y si todavía querés usar javascript, esto me funciona en todos los navegadores:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  3.     $(function(){
  4.         $('.botonFormulario').click(function(){
  5.             $(this).css('background','#c1dbc2 url(http://placekitten.com/100/50) no-repeat center center')
  6.         });
  7.     });
  8. <meta charset=utf-8 />
  9. <title>JS Bin</title>
  10.     .botonFormulario{
  11.         background : #c1dbc2 url(http://placedog.com/100/50) no-repeat center center;
  12.         width:100px;
  13.         height:50px;
  14.     }
  15. </head>
  16.   <input class="botonFormulario" type="submit" value="Click">
  17. </body>
  18. </html>

Te podría decir que el problema puede estar en las rutas de las imágenes, pero parece que estás usando rutas absolutas así que tal vez no.

Yo consideraría usar la solución CSS y sprites para evitar que se note la carga de la imagen al hacer click.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 29/04/2012, 08:53
 
Fecha de Ingreso: abril-2012
Mensajes: 63
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: jquery: background image, explorer y su madre

Gracias, lo probaré

Etiquetas: explorer, formulario, funcion, image, input, madre, php, fondo
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 00:56.