quitar contenido a los <li> para hacer un rollOver con imagen

sueiro1984 · #1 (**permalink**) 16/05/2013, 15:24

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

javierflti · #2 (**permalink**) 28/05/2013, 10:17

Si he entendido bien es más simple que todo eso.

Una clase css

Código CSS:

Ver original.noticias {
background:url('images/noticiasbtu.png')no-repeat;
}
.noticias:hover {
background:url('images/noticiasbtu_hover.png')no-repeat;
}

Y en tu html

Código HTML:

Ver original<li class="noticias"><a href="#"></a></li>

Cuando pasen por encima del li, verán la pseudoclase hover de la clase noticias, por tanto verán la segunda imagen. Cuando no estén encima verán solo la clase noticias y verán la primera imagen.

Así con todos tus enlaces.

También podrías usar la misma imagen para todos tus li, con li y con li:hover

Espero haberte ayudado, y si tienes dudas pregunta.