Buenas tardes amigos desarrolladores:
Estoy desarrollando una pagina web en la cual quiero implementar un tipo de menu que he visto en flash lo implemente con JavaScript & CSS, carga mucho mas rapido y es más facil de manipular pero estoy parado con un detalle que al igual y dicen es muy tonto pero no encuentro resolverlo. Quiero que cada elemento del menu tenga una viñeta y esta cambie con el evento
hover
Lei algo en la web acerca de la propiedad list-style-image pero no consigo implementarlo ojala alguien pueda ayudarme anexo mi hoja de estilo para el menu y el menu pueden verlo en www .alzocalo .com aparecen los enlaces los efectos que quiero menos las viñetas saludos y ojala alguien pueda asesorarme o señalar mi error. GRACIAS DE ANTEMANO
HOJA DE ESTILO:
__________________________________________
/*Menu del portal*/
#menu
{
list-style-image:url(../imagenes/jpg/flecha.jpg);
margin:0;
padding:0;
top:30px;
}
#menu li a
{
/*Establecemos la decoracion*/
text-decoration:none;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/jpg/flecha.jpg);
/*Establecemos la tipografia a usar*/
font-family:Arial, Helvetica, sans-serif;
/*y el tamaño de la fuente*/
font-size:11px;
/*Establecemos el color*/
color:#000000;
}
#menu li a:hover
{
/*Establecemos el color*/
color:#FFFFFF;
/*Establecemos la decoracion*/
text-decoration:underline;
/*cambiamos la viñeta por la adecuada para el evento*/
list-style-image:url(../imagenes/png/vineta_on.png);
/*y el tamaño de la fuente*/
font-size:12px;
}
-------------------------------------------------------------------
MENU EN DOCUMENTO HTML:
__________________________________________
<div style="position:relative; width:1045; height:125px; top:45px; background-color:#ff9a2d;">
<img style="left:0px; top:20px; position:relative;" src="imagenes/png/logo.png">
<img style="left:390px; top:-50px; position:absolute;" name="icono1" src="imagenes/png/libro-gris.png">
<img style="left:360px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:555px; top:-50px; position:absolute;" name="icono2" src="imagenes/png/monos-gris.png">
<img style="left:530px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:745px; top:-50px; position:absolute;" name="icono3" src="imagenes/png/dados-gris.png">
<img style="left:700px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<img style="left:905px; top:-50px; position:absolute;" name="icono4" src="imagenes/png/cara-gris.png">
<img style="left:870px; top:-20px; position:absolute;" src="imagenes/png/fondo-menu.png" />
<ul style="position:absolute; left:390px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono1', icono1_on);" onmouseout="Cambia_Icono('icono1', icono1_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:560px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono2', icono2_on);" onmouseout="Cambia_Icono('icono2', icono2_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:730px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono3', icono3_on);" onmouseout="Cambia_Icono('icono3', icono3_off);">Prueba5</a></li>
</ul>
<ul style="position:absolute; left:900px;" id="menu">
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba1</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba2</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba3</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba4</a></li>
<li><a href="#" onmouseover="Cambia_Icono('icono4', icono4_on);" onmouseout="Cambia_Icono('icono4', icono4_off);">Prueba5</a></li>
</ul>
</div>