rollOver en listas

sueiro1984 · #1 (**permalink**) 15/05/2013, 20:14

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

juanito1712 · #2 (**permalink**) 15/05/2013, 21:13

una forma podría ser esta

<a href="#" class="r1"><li></li></a>
<a href="#" class="r2"><li></li></a>

.r1{background:url('images/noticiasbtu.png');}
.r1:hover{background:url('images/noticiasbtuhov.png');}

como consejo en lugar de cambiar la imagen haz una imagen que contenga los dos estados del botón y cambias su posición con background-position, así y no tendrás problemas al tener que esperar que se cargue

.r1{background:url('images/noticiasbtu.png'); background-position:0 0;}
.r1:hover{background-position:0 -100px;}

y como apunte extra, no conozco como será la página pero piensa si el div que envuelve a ul es realmente necesario ya que ul se puede comportar exactamente como div
<ul id="nav">

sueiro1984 · #3 (**permalink**) 16/05/2013, 14:47

hola, gracias por tu respuesta, pero sigo teniendo el mismo problema, al quitar el contenido entre <li></li> me desaparece ese hueco, y por mucho que cambio la posicion no me aparece por ningun lado de la pantalla

juanito1712 · #4 (**permalink**) 16/05/2013, 16:04

dale un width y un height a los li, ya que estan vacios se encojen

sueiro1984 · #5 (**permalink**) 16/05/2013, 16:29

nada, sigue sin funcionar, si quieres te paso por mail el zip, para que lo veas mejor si quieres

juanito1712 · #6 (**permalink**) 16/05/2013, 16:33

echale un ojo a este fragmento ;)

#nav li{width:300px; height:30px; border:solid 4px #0f0;}
</style>
</head>
<body>
<ul id="nav">
<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>

juanito1712 · #7 (**permalink**) 16/05/2013, 16:36

quiza el problema lo tengas con el display inline, dale un float:left a los li y a ul que los contiene un clear:both y overflow:hidden

sueiro1984 · #8 (**permalink**) 16/05/2013, 16:51

sigo teniendo el mismo problema

juanito1712 · #9 (**permalink**) 16/05/2013, 17:01

va cuelgalo que le eche un vistazo que esto ya se ha convertido en algo personal XD

sueiro1984 · #10 (**permalink**) 16/05/2013, 17:03

la cuestion es que quiero quitar esto <img src="images/fiestasbut.png" /> y que ese hueco no desaparezca, poniendo la imagen a traves del css pero no aparece de ninguna de las maneras que hemos mencionado aqui, no se que estoy poniendo mal la verdad.

Tambien he probado haciendo esto
#nav{el mismo que el anterior}
#nav a#fiestas{background:imagen.png;}
#nav a#fiestas:hover{backgorund:imagen2.png;}
<div id=nav>
<a href="#"><div id=fiestas></div><a>
</div>

Pero tampoco me inserta la imagen, ni aparece por ningun lado de la pantalla :S , y tambien he probado metiendo floats, width de cada uno... etc, y nada de nada....

sueiro1984 · #11 (**permalink**) 16/05/2013, 17:04

pasame tu correo y te lo mando en un zip, que no tengo donde subirlo