Foros del Web » Creando para Internet » CSS »

menu con imagenes

Estas en el tema de menu con imagenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2009, 15:38
 
Fecha de Ingreso: agosto-2006
Mensajes: 112
Antigüedad: 11 años, 4 meses
Puntos: 2
menu con imagenes

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
  #2 (permalink)  
Antiguo 02/07/2009, 15:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu con imagenes

En www.araudi.net Mikmoro tiene algún ejemplo de esa técnica
y aquí algo más elaborado
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 02/07/2009, 15:46
 
Fecha de Ingreso: agosto-2006
Mensajes: 112
Antigüedad: 11 años, 4 meses
Puntos: 2
Respuesta: menu con imagenes

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.
  #4 (permalink)  
Antiguo 02/07/2009, 15:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu con imagenes

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 02/07/2009, 16:04
 
Fecha de Ingreso: agosto-2006
Mensajes: 112
Antigüedad: 11 años, 4 meses
Puntos: 2
Respuesta: menu con imagenes

man esta muy tragico ;( no tendras un codigo ahi a la mano porfavor....
  #6 (permalink)  
Antiguo 02/07/2009, 16:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu con imagenes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 02/07/2009, 16:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: menu con imagenes

bueno no se si te entendi pero bueno... aqui te pongo esto ojala te sirva de algo chao!...
Código css:
Ver original
  1. /*
  2. para los :hover imaginemos que tu imagen de fondo tiene 40px de alto ok?... pero
  3. en ella 20px es tu imagen estatica y los otros 20px es la imagen en :hover ok?
  4. en tonces cuando hacemos el :hover simplemente le cambiamos la posicion de altua.
  5. */
  6. .lnk1, .lnk2, .lnk3{ width:200px; height:20px; display:block;}
  7. .lnk1{background:url(http://i41.tinypic.com/261yjol.jpg) }
  8. .lnk1:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}
  9.  
  10. .lnk2{background:url(http://i41.tinypic.com/261yjol.jpg);}
  11. .lnk2:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}
  12.  
  13. .lnk3{background:url(http://i41.tinypic.com/261yjol.jpg);}
  14. .lnk3:hover{background:url(http://i41.tinypic.com/261yjol.jpg) 0 20px;}

Código html:
Ver original
  1. <a href="#" class="lnk1"></a>
  2. <a href="#" class="lnk2"></a>
  3. <a href="#" class="lnk3"></a>
  #8 (permalink)  
Antiguo 02/07/2009, 16:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu con imagenes

@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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 02/07/2009, 17:18
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: menu con imagenes

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...
  #10 (permalink)  
Antiguo 03/07/2009, 14:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: menu con imagenes

Hola:

Cita:
Iniciado por art33 Ver Mensaje
kseso? k borde...
¡Lo que hay que leer!

Saludos.

  #11 (permalink)  
Antiguo 03/07/2009, 14:58
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: menu con imagenes

Cita:
Iniciado por art33 Ver Mensaje
kseso? k borde...
Lo que hay que ver por tener ojos.
  #12 (permalink)  
Antiguo 03/07/2009, 15:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: menu con imagenes

¿Ca borde...? ¿k border? creo que eso es una propiedad CSS3, ¿no?
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 03/07/2009, 15:54
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: menu con imagenes

Cita:
Iniciado por Mikmoro Ver Mensaje
¿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?
  #14 (permalink)  
Antiguo 03/07/2009, 15:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menu con imagenes

@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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 03/07/2009, 17:07
 
Fecha de Ingreso: agosto-2008
Mensajes: 272
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: menu con imagenes

k os den... no vuelvo a ayudar.... solo lo intente...
  #16 (permalink)  
Antiguo 03/07/2009, 18:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: menu con imagenes

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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 07/07/2009, 10:23
 
Fecha de Ingreso: agosto-2006
Mensajes: 112
Antigüedad: 11 años, 4 meses
Puntos: 2
Respuesta: menu con imagenes

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.
  #18 (permalink)  
Antiguo 07/07/2009, 13:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: menu con imagenes

Hola:

Cita:
Iniciado por useraul Ver Mensaje
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.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:53.