Foros del Web » Programando para Internet » Javascript »

Cargar al inicio imagenes del onmouse

Estas en el tema de Cargar al inicio imagenes del onmouse en el foro de Javascript en Foros del Web. Hola, Tengo en mi página unos botones del menu que al pasar el ratón por encima salen otra, el onmouse. El código es este, funciona ...
  #1 (permalink)  
Antiguo 07/01/2011, 06:41
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 1
Cargar al inicio imagenes del onmouse

Hola,

Tengo en mi página unos botones del menu que al pasar el ratón por encima salen otra, el onmouse. El código es este, funciona perfectamente:

Código:
<img src="img/inicio01.jpg" onMouseOver="this.src = 'img/inicio02.jpg'" onMouseOut="this.src = 'img/inicio01.jpg'" border="0"></a></img>
El problema es, que para que funcionen a la primera no carga o carga lento. Quisiera hacer que al entrar en la página se cargasen sin haberle dado aun, de esta forma al usarlos ya se ven correctamente.

Lo he visto muchas veces pero por más que busco no encuentro el código o la manera.

Muchas gracias
  #2 (permalink)  
Antiguo 07/01/2011, 06:54
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Cargar al inicio imagenes del onmouse

tan simple como colocar las imágenes con img aplicando el CSS position: none; para que se carguen de una vez y no se muestren, pero el verdadero problema aquí no es la carga de las imágenes, sino el modo ineficiente de hacerlo:

con el CSS :hover puede lograrse perfectamente dicho efecto si colocamos en un solo archivo de imágen las 2 imágenes para el efecto y con el css :hover solo aplicaríamos el background-position para "mover" internamente la imagen hacia el trozo que compone la 2 imagen, incluso podemos hacer un collage con todas las imágenes de todos los botones y así tener solo una imagen grande que cargar y la eficiencia mejora mucho.
ejemplo como se usa en youtube:
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 07/01/2011, 07:22
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Cargar al inicio imagenes del onmouse

Entonces CSS, ya decía yo que no me podía saltar el CSS. Pues nada, tendré que darle caña porque es algo que no domino.

Gracias por la orientación!
  #4 (permalink)  
Antiguo 07/01/2011, 09:00
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Cargar al inicio imagenes del onmouse

Bueno ya lo hice, dejo el trozo de css:

Código:
<style type="text/css">
.boton1 {margin: 0 auto;
position: relative;
width: 111px;
height: 44px;
}
a {display: block;
height: 100%;
width: 100%;
background: url(imgs/baner01.png) no-repeat center top;
}
a:hover {background: url(imgs/baner01.png) no-repeat center bottom;
}
  </style>
Luego ya es poner <div class="boton1"><a href="url"></a></div>

y listo!

Voy a tener que comprarme un libro de css que se está usando bastante y con buenos resultados.

Gracias de nuevo
  #5 (permalink)  
Antiguo 07/01/2011, 09:31
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Cargar al inicio imagenes del onmouse

Cita:
Iniciado por maycolalvarez Ver Mensaje
incluso podemos hacer un collage con todas las imágenes de todos los botones y así tener solo una imagen grande que cargar y la eficiencia mejora mucho.
podrías explicar con mas detalle, no consigo entenderlo. como se haría ese rollover?? estás hablando de usar mapa de bits??

gracias

Etiquetas: imagenes, inicio
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 05:09.