13/09/2011, 09:25
| ||||
| ||||
| Cambiar imagen con div:hover Hola, Tengo un div con una imagen y con div:hover con otra imagen. Es decir en estado normal se visualiza una imagen y cuando paso el raton por encima se visualiza otra imagen. De momento todo bien. El codigo es facil y lo he hecho. El problema es que cuando pasas el raton encima, parpadea una ves (mientras carga la imagen hover) y entonces aparece. Es solo un segundo, pero es molesto. Hay alguna solucion? |
|
13/09/2011, 09:55
| |||
| |||
| Respuesta: Cambiar imagen con div:hover prueba ha hacer una precarga de imagenes cuando se carga la web <script language="javascript 1.2"> <!-- var i; var imagenes = new Array("imagen1.gif","imagen2.gif","imagen3.gif"); var lista_imagenes = new Array(); function cargarimagenes(){ for(i in imagenes){ lista_imagenes[i] = new Image(); lista_imagenes[i].src = imagenes[i]; } } //--> </script> <body> <script> cargarimagenes(); </script> |
|
13/09/2011, 10:00
| ||||
| ||||
| Respuesta: Cambiar imagen con div:hover Supongo que estás usando las imagenes de fondo con el css no?? No conoces una tecnica llamada CSS Sprite? Es ideal para este tipo de cosas, porque usa una sola imagen de fondo y con el background-position la mueves para que se muestre solo un pedazo de la imagen en cada vez, es muy util |
|
15/09/2011, 14:25
| |||
| |||
| Respuesta: Cambiar imagen con div:hover estimado, la mejor solución para ello, es que utilices UNA SOLA IMAGEN para todos los efectos. Ejemplo: el boton mide 20x20 (px), para ello creas una imagen de 40x20 (px) que mantenga ambos eventos. Para ponerlo en ejecución pones: Cita: Ante cualquier duda o consulta, me avisas y te aclaro las dudas :P <style> #boton{ display:block; /* PARA QUE USE TODO EL TAMAÑO QUE LE ASIGNASTE AL DIV */ width:20px; /* ANCHO DEL BOTON */ height:20px; /* ALTO DEL BOTON */ background-image: url(imagen.png); /* LINK DE TU IMAGEN D E 40X20 (px) */ background-repeat: no-repeat; /* PARA QUE NO SE REPITA EN NINGUN LUGAR DEL DIV */ background-position: 0px 0px; /* LUGAR INICIAL, EN ESTE CASO, 0px ARRIBA Y A LA IZQUIERDA */ background-attachment: scroll; /* PARA QUE SIEMPRE SEA LA MISMA POSITION */ overflow:visible; /* PARA QUE TE MUESTRE TODO EL BOTON */ cursor:pointer; /* PARA QUE EL MOUSE SE PONGA DE SELECCIÓN */ } #boton:hover{ background-position:20px 0px; } </style> <html> <div id="boton"> <a href="http://www.google.cl"> </a> <!--   es un espacio vacío, es como apretar espacio --> </div> </html> |
|
16/09/2011, 09:04
| ||||
| ||||
| Respuesta: Cambiar imagen con div:hover Hola venommist, muchas gracias por la idea y por la detallada explicación. Ahora entiendo como se hace y lo que es mas importante, porque hay que hacerlo de esta manera. Lo probaré y si tengo dudas, comentaré. |
|
16/09/2011, 14:28
| |||
| |||
| Respuesta: Cambiar imagen con div:hover [HTML <style> #precarga{width:0px;height:0px;display:inline; background-image: url(imagen1); background-image: url(imagen2); background-image: url(imagen3); background-image: url(imagen4); background-image: url(imagen5); background-image: url(); } </style> <div id="precarga"/> [/HTML] Precarga de imágenes por css, simple. |
|
20/09/2011, 09:28
| ||||
| ||||
| Respuesta: Cambiar imagen con div:hover Cita:
Iniciado por Korreca  [HTML <style> #precarga{width:0px;height:0px;display:inline; background-image: url(imagen1); background-image: url(imagen2); background-image: url(imagen3); background-image: url(imagen4); background-image: url(imagen5); background-image: url(); } </style> <div id="precarga"/> [/HTML] Precarga de imágenes por css, simple. Hola, probé tu metodo, pero solo me prerecarga la ultima imagen que he puesto como background. Alguna sugerencia? |
| Etiquetas: Ninguno |
