Foros del Web » Creando para Internet » CSS »

Imagen link con CSS

Estas en el tema de Imagen link con CSS en el foro de CSS en Foros del Web. Hola, Necesito poner imágenes links pero no como fondo sino como imagen frontal (tag image). No he encontrado la sintaxis correcta para ellos usando los ...
  #1 (permalink)  
Antiguo 04/05/2015, 05:03
Usuario no validado
 
Fecha de Ingreso: agosto-2007
Ubicación: Ciudad de Lima, Perú.
Mensajes: 36
Antigüedad: 16 años, 8 meses
Puntos: 0
Imagen link con CSS

Hola,
Necesito poner imágenes links pero no como fondo sino como imagen frontal (tag image).
No he encontrado la sintaxis correcta para ellos usando los pseudo selectores. SI quiero algo global, cómo sería?

img a:link {/*ninguna propiedad/*}

a img:link{}

img a:hover {opacity:0.5}

a img:hover{opacity:0.5}

O quizás...|

a img { }
a:hover img { }

Cuáles de éstas son las correctas? o acaso ninguna?

Luego, otra pregunta general: Usando selectores descendentes, compuestos, combinados (como los llamen), en el panel CSS del dreamweaver me aparecen cascadas así:
#contenido.clase1 img a
#contenido.clase1 img a:link

Cuál es la diferencia entre ambos? Eso me aparece en el panel CSS del dreamweaver y siento que me confunde ya que en un CSS puro, el código se escribe algo diferente. Quiero saber la manera correcta y saber si DW es "engañoso".

Muchas veces siento que lo que seteo en el panel CSS no produce los cambios esperados pero cuando manipulo el código, allí sí. Me estoy inclinando cada vez más a enfatizar mejor en el código.


Gracias.
  #2 (permalink)  
Antiguo 04/05/2015, 07:56
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 8 meses
Puntos: 145
Respuesta: Imagen link con CSS

Pero, ¿cuál es el problema? ¿Qué quieres hacer?

"Necesito poner imágenes links pero no como fondo sino como imagen frontal (tag image)."

¿Qué es para vos una "imagen frontal"?
¿Esto?

Código HTML:
Ver original
  1. <a href="www.google.com">
  2.     <img src="http://images.amcnetworks.com/amctv.com/wp-content/uploads/2014/04/BB-explore-S1-980x551-clean.jpg" />
  3. </a>



Respecto al tema de pseudo selectores/elementos, el correcto sería:

Código CSS:
Ver original
  1. a img:hover{opacity:0.5}

Por el simple hecho de que el hover se va a aplicar al IMG que está dentro del A.
No puede haber un enlace dentro de una imagen, porque las imágenes solo tienen "un tag", es decir, no cierra.

Saludos.
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 04/05/2015, 23:23
Usuario no validado
 
Fecha de Ingreso: agosto-2007
Ubicación: Ciudad de Lima, Perú.
Mensajes: 36
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: Imagen link con CSS

Imagen frontal vs Imagen de fondo.
Lo que pasa es que abunda mucho material sobre el uso de imágenes de fondo para los CSS sprites.
Usan el background: url...etc...
La imagen frontal es para mí aquella que no se usa de fondo. Es una etiqueta HTML "img". Y ese elemento también se usa en CSS.
Usar imágenes links en HTML sí lo sé. Necesitaba saber si quiero que todas las imágenes link de mi sitio cuando se les pase el ratón por encima (hover) bajen su opacidad a 0.5 por ejemplo. o que aumenten muy sutilmente su tamaño o cualquier otro efecto.

El usar imágenes link en HTML solamente no da muchas opciones.

Etiquetas: link
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 13:32.