Foros del Web » Creando para Internet » CSS »

borde de imágenes con link con diferente color

Estas en el tema de borde de imágenes con link con diferente color en el foro de CSS en Foros del Web. Hola buenas, resulta que tengo una página con diferentes miniaturas de imágen que cada una lleva un link y querría que según determinadas características, unas ...
  #1 (permalink)  
Antiguo 27/02/2007, 14:47
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 13 años, 7 meses
Puntos: 0
borde de imágenes con link con diferente color

Hola buenas, resulta que tengo una página con diferentes miniaturas de imágen que cada una lleva un link y querría que según determinadas características, unas presentaran un borde de distinto color a otras, pero no sé cómo hacerlo.

A parte, quisiera que al hacer HOVER con el ratón, el color del borde cambiase al mismo pero más intenso (otro color vamos).

Espero que se pueda hacer jeje.
Venga muchas gracias y saludos!
  #2 (permalink)  
Antiguo 27/02/2007, 15:09
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: borde de imágenes con link con diferente color

Para que algunas presenten otro color, agrega una clase, añade esta clase a todas las imagenes que quieras que tengan ese trato especial, y desde la hoja de estilos le apuntas a esta clase.

El tema del hover del ratón es diferente, ya que puedes utilizar las pseudo-clases del vínculo:

a:link
a:visited
a:hover
a:focus

Saludos.
  #3 (permalink)  
Antiguo 27/02/2007, 16:07
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: borde de imágenes con link con diferente color

podrías poner un ejemplo para un sólo color??
  #4 (permalink)  
Antiguo 27/02/2007, 16:42
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: borde de imágenes con link con diferente color

Ejemplo...

Tenemos links verdes por defecto:

a{
color: green;
}

Ahora queremos que solo algunos sean rojos, digamos, los de la clase .alerta:

a.alerta{
color: red;
}

Ahora queremos que los links por defecto, cuando se pose el mouse por encima, se pongan negros:

a:hover{
color: black;
}

Por último, a los de alerta los queremos naranjas cuando se pose el mouse por encima:

a.alerta:hover{
color: orange;
}

Listo!

Espero que te sirva. Saludos.
  #5 (permalink)  
Antiguo 27/02/2007, 16:47
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: borde de imágenes con link con diferente color

ok gracias, no sé por qué no me salía y ya lo he dejado así:

a.green:link IMG, a.green:visited IMG {border: 2px solid #FDF5C1;}
a.green:hover IMG {border: 2px solid yellow;}

a.orange:link IMG, a.green:visited IMG {border: 2px solid #e8ae12;}
a.orange:hover IMG {border: 2px solid orange;}

a.red:link IMG, a.green:visited IMG {border: 2px solid #d10b27;}
a.red:hover IMG {border: 2px solid red;}

Supongo que la única diferencia es que de esta manera tengo borde 2px
Igual se consigue con lo que me has puesto pero añadiendo borde 2px a cada imágen no?

Vaya lio esto del css
  #6 (permalink)  
Antiguo 27/02/2007, 17:01
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: borde de imágenes con link con diferente color

Claro que si.

No es lio. Es simplemente entender algunas reglas basicas, y luego hacer lo que tu haces, preguntar, aprender y seguir preguntando, y seguir aprendiendo. Bien por ti!

Aqui tienes algo que quizas pueda ayudarte a hacer un poco de luz.

Saludos.
  #7 (permalink)  
Antiguo 27/02/2007, 19:43
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 13 años, 7 meses
Puntos: 0
Re: borde de imágenes con link con diferente color

ok pues muchas gracias!
saludosss
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 (incluyéndote)




La zona horaria es GMT -6. Ahora son las 22:17.