Cargar al inicio imagenes del onmouse

[Wikki]

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

[maycolalvarez]

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:

[Wikki]

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!

[Wikki]

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

[IsaBelM]

Iniciado por maycolalvarez

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