Compañeros, no entiendo muy bien lo que me contais, pongo el link de mi página y el codigo a ver si me podeis ayudar
http://mhou.es/mgl/mgl.php el problema es que la primera vez que paso con el ratón por encima de la opción "servicios" una de las dos imagenes ( el desplegable ) aparece antes que el botón superior. Esto solo pasa la primera vez ya que luego el navegador carga las dos imagenes el cache y las muestra a la vez.
Me interesa precargar la imagen que aparece segundo por evitar el efecto, ya que queda un poco mal.
Decir también que las imagenes las va a buscar a una hoja de estilo CSS, nose si puede venir el problema de la precarga por aquí.
Cita: <script language="javascript 1.2"> imagen = new Image(); imagen.src = "Imagenes/boton_menu_servicios.png";
</script>
Cita: /*MENU*/
.menu {width:480px; float:right; position:relative; left:-40px; top:-10px; }
.menu ul {padding:0;margin:0;list-style-type:none; float:right; }
.menu ul ul { display:marker; width:500px; background-color:white;}
.menu li {float:left;width:95px;position:relative; }
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:white; width:85px; height:60px; position:relative; top:15px; left:5px;//left:0px; }
.menu ul li:hover{ background:url(Imagenes/boton_menu.png) top center no-repeat;}
.menu ul ul a.drop, .menu ul ul a.drop:visited {display:block;font-size:10px;text-decoration:none; color:white; width:85px; height:40px; padding:0px; vertical-align:middle; position:relative; top:1em; left:-1px;//left:0px; }
.menu ul ul :hover > a.drop { display:block;font-size:10px; font-weight:10px; text-decoration:none; color: #FFAE5E; width:85px; height:40px; padding:0px; vertical-align:middle; position:relative; top:1em;}
.menu ul ul a.drop p,.menu ul ul :hover > a.drop p { line-height:normal; outline:0;}
.menu ul ul { visibility:hidden;position:relative;top:-6px; left:0px;//left:0px; background:url(Imagenes/desplegable.png) no-repeat top center; width:96px; height:90px; }
.menu ul ul p{ margin-bottom:-51px; //margin-bottom:0px;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
.menu a:hover, .menu ul ul a:hover{ position:relative; top:15px; outline:0;}
.menu ul li{ }
.menu ul li a{outline:0;}
.menu ul ul li { }
.menu ul ul li:hover {background-image:none; }
.menu ul ul li a {background-image:none;outline:0; }
.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible; outline:0;}
.menu ul :hover ul ul{visibility:hidden;}
Si alguien sabe resolver alguna de estas preguntas me haría un favor:
1.- Porque no se cargan todas las imagenes a la vez
2.- Porque no se realiza la precarga a la vez
3.-Cual es el sistema que utiliza el navegador para cargar este tipo de menus
4.- Alguna solución diferente para precargar la imagen
5.- Alguna otra solución que no implique una precarga
Un saludo muy grande
Grácias