Foros del Web » Creando para Internet » CSS »

link visitados con imagenes

Estas en el tema de link visitados con imagenes en el foro de CSS en Foros del Web. bueno necesito hacer el efecto de los links sin visitar y visitados pero con imagenes, que este una cuando no este visitado y que cambie ...
  #1 (permalink)  
Antiguo 10/11/2006, 09:44
 
Fecha de Ingreso: mayo-2004
Mensajes: 74
Antigüedad: 13 años, 6 meses
Puntos: 0
link visitados con imagenes

bueno necesito hacer el efecto de los links sin visitar y visitados pero con imagenes, que este una cuando no este visitado y que cambie a otra cuando ya se haya visitado esto es posible??
__________________
Por muy fuerte que sea la tormenta, al final siempre sale el sol
  #2 (permalink)  
Antiguo 10/11/2006, 12:28
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola,

Mira se hace así:

Código:
a.menu:link {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_link.png) top left no-repeat;
color : #000;
}

a.menu:visited {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_visitados.png) top left no-repeat;
color : #000;
}

a.menu:hover {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_hover.png) top left no-repeat;
color : #000;
}

a.menu:active {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_activos.png) top left no-repeat;
color : #000;
}
Espero te sirva, a mi me funciona bien y sin problemas...
__________________
_______
Jorge Rojas.
  #3 (permalink)  
Antiguo 13/11/2006, 12:53
 
Fecha de Ingreso: mayo-2004
Mensajes: 74
Antigüedad: 13 años, 6 meses
Puntos: 0
ok. dispculpa mi ignorancia en este tema pero como aplico la hoja de estilo o solo con ponerle el <a href> la respeta; y la imagen va en lugar del color de fondo???
__________________
Por muy fuerte que sea la tormenta, al final siempre sale el sol
  #4 (permalink)  
Antiguo 13/11/2006, 14:22
 
Fecha de Ingreso: mayo-2004
Mensajes: 74
Antigüedad: 13 años, 6 meses
Puntos: 0
Era muy sencillo, pero tengo otro inconveniente, son como 12 imagenes y cada una con su repectivo link, como lo soluciono??
__________________
Por muy fuerte que sea la tormenta, al final siempre sale el sol
  #5 (permalink)  
Antiguo 14/11/2006, 07:31
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2035
Cita:
Iniciado por jean1124 Ver Mensaje
Era muy sencillo, pero tengo otro inconveniente, son como 12 imagenes y cada una con su repectivo link, como lo soluciono??
¿Las has metido dentro del div?, no me explico como es que no te funciona...
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #6 (permalink)  
Antiguo 14/11/2006, 09:20
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por iconogt Ver Mensaje
Mira se hace así:

Código:
a.menu:link {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_link.png) top left no-repeat;
color : #000;
}
 
a.menu:visited {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_visitados.png) top left no-repeat;
color : #000;
}
 
a.menu:hover {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_hover.png) top left no-repeat;
color : #000;
}
 
a.menu:active {
display : block;
width : 50px;
height : 17px;
margin : 2px;
padding : 0 0 0 20px;
background : #fff (imagen_activos.png) top left no-repeat;
color : #000;
}
Espero te sirva, a mi me funciona bien y sin problemas...
Cita:
Iniciado por jean1124 Ver Mensaje
ok. dispculpa mi ignorancia en este tema pero como aplico la hoja de estilo o solo con ponerle el <a href> la respeta;???
A los enlaces o sea a las etiquetas a aplicas un class="menu" haciendo referencia a lo que te puse en negrita en el codigo de arriba


Cita:
Iniciado por jean1124 Ver Mensaje
y la imagen va en lugar del color de fondo???
Las imagenes que quieras utilizar son llamadas en la parte que te puse en negrita y que termina con .png, ahi pones la ruta a tus imagenes.

Cita:
Iniciado por jean1124 Ver Mensaje
Era muy sencillo, pero tengo otro inconveniente, son como 12 imagenes y cada una con su repectivo link, como lo soluciono??
Esto es html, y a cada enlaces le pones su respectivo href="pagina#"

Cita:
Iniciado por RBZ Ver Mensaje
¿Las has metido dentro del div?, no me explico como es que no te funciona...
Aun cuando la meta en un div, el codigo que le distes, aplica una clase solamente a una etiqueta a, el codigo esta asi a.menu:_____.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #7 (permalink)  
Antiguo 14/11/2006, 11:23
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola a todos [as],

Quisiera que postearan el código y que el amigo(a) explique claramente lo que quiere lograr ya que en su post solo pide orientación para usar imagenes en los diferentes estados de un link, no pide info acerca de otro problema ni se está explicando bien... espero respuesta
__________________
_______
Jorge Rojas.
  #8 (permalink)  
Antiguo 14/11/2006, 15:46
 
Fecha de Ingreso: mayo-2004
Mensajes: 74
Antigüedad: 13 años, 6 meses
Puntos: 0
OK. pues bueno lo que queria hcer ya lo logre y sale al perfeccion solo es cuestion de analizar un poquitin el codigo y si quieres el codigo te lo envio despues porque ahorita estoy un poco ocupada gracias por todo...
__________________
Por muy fuerte que sea la tormenta, al final siempre sale el sol
  #9 (permalink)  
Antiguo 14/11/2006, 17:14
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por jean1124 Ver Mensaje
OK. pues bueno lo que queria hcer ya lo logre y sale al perfeccion solo es cuestion de analizar un poquitin el codigo y si quieres el codigo te lo envio despues porque ahorita estoy un poco ocupada gracias por todo...
Hola, yo no quiero el codigo, nuestro interes es saber si resolvistes el problema, y sentirnos satisfechos de haber compartido nuestro conocimientos. Espero que de una manera u otra te hayamos ayudado.

__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 15/11/2006, 09:36
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola a todos [as],

Bueno yo lo sugería ya que por lo visto han surgido unas cuantas dudillas mas Pero si ya está solucionado el problema pues que bien, me da mucho gusto

Cuidense
__________________
_______
Jorge Rojas.
  #11 (permalink)  
Antiguo 15/11/2006, 11:26
 
Fecha de Ingreso: noviembre-2002
Ubicación: Avellaneda
Mensajes: 247
Antigüedad: 15 años
Puntos: 0
Hice una prueba poniendo una imagen solo en el "hover" pero no me funciono con "background" sino con "background-image",

deberia funcionar de las dos maneras????
__________________
www.elumina.com.ar
  #12 (permalink)  
Antiguo 15/11/2006, 14:21
 
Fecha de Ingreso: mayo-2004
Mensajes: 74
Antigüedad: 13 años, 6 meses
Puntos: 0
Pues a mi solo me funcionó con background-image: y estuve investigando un poco y parece que es la manera correcta de usar imagenes como fondo!!
Una vez mas gracias a todos...
__________________
Por muy fuerte que sea la tormenta, al final siempre sale el sol
  #13 (permalink)  
Antiguo 15/11/2006, 14:54
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por jean1124 Ver Mensaje
estuve investigando un poco y parece que es la manera correcta de usar imagenes como fondo!!
Anja, exacto es recomendado, al menos yo "trató" siempre de insertar mis imagenes de esa forma. Y los resultados son excelentes !!!!!!
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #14 (permalink)  
Antiguo 16/11/2006, 08:33
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2035
Cita:
Iniciado por fearlex Ver Mensaje

Aun cuando la meta en un div, el codigo que le distes, aplica una clase solamente a una etiqueta a, el codigo esta asi a.menu:_____.
Vaya creo que había entendido algo distinto sobre lo que quería hacer.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #15 (permalink)  
Antiguo 16/11/2006, 10:32
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por RBZ Ver Mensaje
Vaya creo que había entendido algo distinto sobre lo que quería hacer.

Eso nos pasa a todos, al menos a mi me pasa todo el tiempo
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #16 (permalink)  
Antiguo 17/11/2006, 12:55
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola a todos [as],

Pues les cuento que yo lo he venido haciendo de la forma como se los muestro y me funca sin ningún problema Incluso!... se podría hacer mas simplificado uniendo todo de esta forma:

Código:
a.fondo:link, a.fondo:visited { 
background : #000 url(directorio/grafico.png) left no-repeat fixed;
}

a.fondo:hover, a.fondo:active { 
background : #000 url(directorio/grafico2.png) left no-repeat fixed;
}
Ahora con lo de la sintáxis que muestran, eso de background-image : ; claro que es la manera corrécta, es sólo que en el ejemplo está en una sintáxis corta que pienso es muy práctico

ejemplo:

Código:
a.fondo {
background-color : ;
background-image : url();
background-position : ;
background-repeat : ;
background-attachment : ; /*opcional*/
}
Código:
a.fondo_Sintaxis_corta {
background : #000 url(directorio/grafico.png) left no-repeat fixed;
}
Eso es todo espero lo apliquen ya que trabajar de esa forma reduce considerablemente el peso de nuestra hoja de estilos y eso sin mensionar el tiempo en typear el código

Slds a todos y todas!...
__________________
_______
Jorge Rojas.

Última edición por iconogt; 17/11/2006 a las 13:01 Razón: un ejemplo a agregar...
  #17 (permalink)  
Antiguo 17/11/2006, 21:24
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Cita:
Iniciado por guilledocke Ver Mensaje
Hice una prueba poniendo una imagen solo en el "hover" pero no me funciono con "background" sino con "background-image",

deberia funcionar de las dos maneras????
No vi el post este antes de responder perdon :( de lo contrario hubiera echo otra explicacion.

Cita:
Iniciado por jean1124 Ver Mensaje
Pues a mi solo me funcionó con background-image: y estuve investigando un poco y parece que es la manera correcta de usar imagenes como fondo!!
Una vez mas gracias a todos...
Estuve de acuerdo pero pense que te referias a que insertar las imagenes en la pagina como background de elementos era la forma recomendada, como no lei el post que cito arriba, no me di cuenta que te referias a la diferencia entre background y background-image.

Cita:
Iniciado por iconogt Ver Mensaje
Pues les cuento que yo lo he venido haciendo de la forma como se los muestro y me funca sin ningún problema Incluso!... se podría hacer mas simplificado uniendo todo de esta forma:

Código:
a.fondo:link, a.fondo:visited { 
background : #000 url(directorio/grafico.png) left no-repeat fixed;
}
 
a.fondo:hover, a.fondo:active { 
background : #000 url(directorio/grafico2.png) left no-repeat fixed;
}
Ahora con lo de la sintáxis que muestran, eso de background-image : ; claro que es la manera corrécta, es sólo que en el ejemplo está en una sintáxis corta que pienso es muy práctico

ejemplo:

Código:
a.fondo {
background-color : ;
background-image : url();
background-position : ;
background-repeat : ;
background-attachment : ; /*opcional*/
}
Código:
a.fondo_Sintaxis_corta {
background : #000 url(directorio/grafico.png) left no-repeat fixed;
}
Eso es todo espero lo apliquen ya que trabajar de esa forma reduce considerablemente el peso de nuestra hoja de estilos y eso sin mensionar el tiempo en typear el código

Slds a todos y todas!...
Para las dos citas de arriba, esta es la respuesta, la cual coincido con 100% con iconogt, no tengo nada que explicar por que el ya lo explico todo, y de forma muy correcta, aunque me gustaria agregar que tambien se aplica para margin, padding, font, etc. Es mejor unirlos todos una vez que se le ha cojido la vuelta, ademas otra cosa que seria mas facil al principio, seria escribir todas las propiedades, y una vez que se logro el efecto deseado se crea una sola propiedad, o sea:

Probamos asi:

font-family: arial;
font-size: 12px;
font-weight: 200

y cuando estemos compacidos con el resultado, pues lo transformamos en esto:

font: arial 12px 200;

Espero se entienda la explicacion
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #18 (permalink)  
Antiguo 18/11/2006, 12:20
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Que tal fearlex,

Yo trato la manera de reducir al máximo mi hoja de estilos, aunque como se mensionaba en un artículo [El cual no recuerdo donde lo ví], [te ahorras unos cuantos kilobytes y tiempo en escribir código], es todo. Verán es 100% cuestión de gustos, es decir, al trabajar con sintáxis corta simplificas tu código.

jajajja Vén cómo nos salimos del tema de los links? Espero haberles podido servir en algo amigos(as).
__________________
_______
Jorge Rojas.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:15.