16/05/2013, 15:24
|
| | Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 11 años, 6 meses Puntos: 0 | |
quitar contenido a los <li> para hacer un rollOver con imagen Tengo una duda sobre como crear un rollOver metiendo un <img src... en cada <li>
y lo que me gustaria saber es como quitar el contenido de los <li> sin que me desaparezca todo el bloque, y aparezca lo que he puesto en el CSS de la etiqueta <a> con su clase.
Dejo aqui el codigo que he empleado:
<style>
ul{
list-style-type:none;
border:2px #9966CC solid;
}
ul li{
display: inline;
padding-right: 7px;
margin-right: 7px;
}
#nav{
width:953px;
height:autopx;
margin:0px auto 0px auto;
margin-top:90px;
}
#nav a.fiestas{
background-image: url(images/fiestasbut.png);
background-repeat: no-repeat;
background-position: 0 -30px;
}
#nav a.fiestas:hover{
background-image: url(images/fiestasbutover.png);
background-repeat: no-repeat;
background-position: 0 -30px;
}
.nnpad{
padding-left:7px;
}
</style>
<body>
<div id="nav">
<ul>
<li class="nnpad"><a class="fiestas" href="#"><img src="images/fiestasbut.png" /></a></li>
<li><a href="#"><img src="images/noticiasbtu.png" /></a></li>
<li><a href="#"><img src="images/galeriabut.png" /></a></li>
<li><a href="#"><img src="images/videobut.png" /></a></li>
<li><a href="#"><img src="images/biobut.png" /></a></li>
<li><a href="#"><img src="images/dossierbut.png" /></a></li>
<li><a href="#"><img src="images/musicabut.png" /></a></li>
<li><a href="#"><img src="images/contactobut.png" /></a></li>
</ul>
</div>
</body>
Tambien he probado a hacerlo en vez de con <li> con <div> y meterle a cada div su id y en sus CSS un background con la imagen,etc y en el codigo meterle un onmouseover y su respectivo onmouseout, con este JS:
<script type="text/javascript">
function rollOver(img){
var dir = document.getElementById('xxx');dir.style.backgroun dImage = 'url(images/' + img + '.jpg)';
}
</script>
y en su codigo:
<a href="#"><div id="xxx" onmouseover="rollOver('img1')" onmouseout="rollOver('img2')"></a>
Pero igualmente me sigue sin aparecer dentro del cuadro del "nav" esa imagen con su hover de boton.
--------------------------------------------------------------------------------------------------------
Espero haber formulado bien la pregunta o la duda, soy nuevo en este foro, el cual me recomendaron, y aun estoy descubriendo como funiona :), pero pronto arreglare el perfil y poco a poco lo ire descubriendo mejor.
Gracias de antemano.
Un saludito |