menu con imagenes

useraul · #1 (**permalink**) 02/07/2009, 14:38

hola amigos, soy nuevo con el tema de css, tengo tres enlaces, los cuales kiero ke cada uno tenga una imagen en reposo y que se active las otras cdo se hacer RollOver, como podria hacer eso con css.
Agradecere su ayuda.

Saludos

kseso? · #2 (**permalink**) 02/07/2009, 14:43

En www.araudi.net Mikmoro tiene algún ejemplo de esa técnica
y aquí algo más elaborado

useraul · #3 (**permalink**) 02/07/2009, 14:46

hey man kseso? gracias por responder pero kiero el codigo, en el primero es solo una imagen para los menuns en mi caso eske tengo tres y cada uno tiene su imagen en reposo e imagen en el rollout.

kseso? · #4 (**permalink**) 02/07/2009, 14:53

Pues en el segundo enlaces son tres enlaces distintos, cada uno al hacer :hover muestra su propia imagen distinta. En este caso aumentando el tamaño y con la particularidad de usar un sprite (un sólo archivo jpg conteniendo las 6 imágenes).

El código lo puedes obtener símplemente con "guardar página completa".
Y úsalo líbremente.

useraul · #5 (**permalink**) 02/07/2009, 15:04

man esta muy tragico ;( no tendras un codigo ahi a la mano porfavor....

kseso? · #6 (**permalink**) 02/07/2009, 15:13

no man, no tengo más código que el que te he brindado en los enlaces.
Y tampoco puedo hacer más por ti si tu mismo no lo haces. Si no le dedicas ni quince minutos a intentar comprender lo ofrecido todo lo demás no sirve de nada.

Un saludo

art33 · #7 (**permalink**) 02/07/2009, 15:31

bueno no se si te entendi pero bueno... aqui te pongo esto ojala te sirva de algo chao!...

Código css:

Ver original/*
para los :hover imaginemos que tu imagen de fondo tiene 40px de alto ok?... pero
en ella 20px es tu imagen estatica y los otros 20px es la imagen en :hover ok?
en tonces cuando hacemos el :hover simplemente le cambiamos la posicion de altua.
*/
.lnk1, .lnk2, .lnk3{ width:200px; height:20px; display:block;}
.lnk1{background:url(http://i41.tinypic.com/261yjol.jpg) }
.lnk1:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}
 
.lnk2{background:url(http://i41.tinypic.com/261yjol.jpg);}
.lnk2:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}
 
.lnk3{background:url(http://i41.tinypic.com/261yjol.jpg);}
.lnk3:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}

Código html:

Ver original<a href="#" class="lnk1"></a>
<a href="#" class="lnk2"></a>
<a href="#" class="lnk3"></a>

kseso? · #8 (**permalink**) 02/07/2009, 15:55

@art33
quizás pienses que le has hecho un favor, pero ni de lejos.
Aparte, sobre tu código, ¿te has parado a pensar qué ocurrirá si las imágenes no cargan? ¿y si fuese el css?

Haz la prueba y saca tus propias conclusiones.

art33 · #9 (**permalink**) 02/07/2009, 16:18

kseso? k borde... perdona lo intente... las imagenes no se borran sino kiero... y el css... nose... esta justo solo para lo k el kiere... (segun entendi) y no es por "darle el bocado masticado" supongo que mira mucho codigo y le da miedo ami tambien... no todos sabemos como tu perdona... y necesitamos un empujonsito pero bueno...

jomaruro · #10 (**permalink**) 03/07/2009, 13:24

Hola:

Cita:

Iniciado por art33

kseso? k borde...

¡Lo que hay que leer!

Saludos.

trasgukabi · #11 (**permalink**) 03/07/2009, 13:58

Cita:

Iniciado por art33

kseso? k borde...

Lo que hay que ver por tener ojos.

Mikmoro · #12 (**permalink**) 03/07/2009, 14:43

¿Ca borde...? ¿k border? creo que eso es una propiedad CSS3, ¿no?

trasgukabi · #13 (**permalink**) 03/07/2009, 14:54

Cita:

Iniciado por Mikmoro

¿Ca borde...? ¿k border? creo que eso es una propiedad CSS3, ¿no?

sí, aplicado con border-radius sale esa cosa con la que termina el nick de Kseso?

kseso? · #14 (**permalink**) 03/07/2009, 14:54

@jomaruro, @trasgukabi, @mikmoro

Dejarlo correr. A este usuario ya le dije en su momento lo que opino de su actitud y comportamiento. Y veo que no tengo motivos para cambiarla.

Un saludo

art33 · #15 (**permalink**) 03/07/2009, 16:07

k os den... no vuelvo a ayudar.... solo lo intente...

Mikmoro · #16 (**permalink**) 03/07/2009, 17:03

Ehhhhhh, tranquilo, chaval, estamos bromeando. Si tienes algo contra alguien no generalices.
Aunque ahora que lo pienso, "no vuelvo a ayudar" supongo que significa que no te veremos más por aquí.
Pues es un poco exageración, la verdad, pero tú sabrás.

useraul · #17 (**permalink**) 07/07/2009, 09:23

hola amigos gracias por sus respuestas, y como dice art33 este foro es para apoyarnos entre nosotros, no es que tengamos miedo al codigo, aveces que estamos contra el tiempo y necesitamos las cosas al grano, alguna ves ayude y lo seguire haciendo pero resolviendo sus respuestas y no dando pistas, para eso es el foro.

Saludos y gracias.

jomaruro · #18 (**permalink**) 07/07/2009, 12:49

Hola:

Cita:

Iniciado por useraul

alguna ves ayude y lo seguire haciendo pero resolviendo sus respuestas y no dando pistas, para eso es el foro.

Que no te parezca mal lo que voy a decirte pero por mucha prisa que tengas, si te dan el código de forma que solo tengas que "copiar y pegar" tardarás más en aprender que es, supongo, lo que pretendes.

A veces es más interesante que nos "fuercen a buscar" y estudiar el porqué pasa esto u ocurre lo otro; es posible que me equivoque pero así es como pienso.

Saludos.