Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/05/2013, 15:24
sueiro1984
 
Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 11 años, 6 meses
Puntos: 0
Pregunta 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