link visitados con imagenes

[jean1124]

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??

[iconogt]

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...

[jean1124]

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???

[jean1124]

Era muy sencillo, pero tengo otro inconveniente, son como 12 imagenes y cada una con su repectivo link, como lo soluciono??

[RBZ]

Iniciado por jean1124

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...

[fearlex]

Iniciado por iconogt

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...

Iniciado por jean1124

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

Iniciado por jean1124

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.

Iniciado por jean1124

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#"

Iniciado por RBZ

¿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:_____.

[iconogt]

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

[jean1124]

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...

[fearlex]

Iniciado por jean1124

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.

[iconogt]

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

[guilledocke]

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????

[jean1124]

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...

[fearlex]

Iniciado por jean1124

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 !!!!!!

[RBZ]

Iniciado por fearlex

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.

[fearlex]

Iniciado por RBZ

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

[iconogt]

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!...

[fearlex]

Iniciado por guilledocke

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.

Iniciado por jean1124

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.

Iniciado por iconogt

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

[iconogt]

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).