duda con enlace

john_peretrucci · #1 (**permalink**) 02/04/2011, 14:19

Buenas, tengo una capa que posee una imagen y un texto y me gustaría que todo fuera un vinculo en el cual al pasar el ratón por encima de la capa que el texto cambiara de color...

En lo que tengo hecho solo se cambia cuando paso por encima del texto:

HTML:

<div class="apartados_home_elemento">
<img src="img/portada-grafico.jpg" alt="portada diseño grafico" />
<table class="tabla" width="170" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/icono-grafico.jpg" alt="icono diseño grafico" /></td>
<td class="elemento_texto1"><a href="diseno-grafico.html"><strong>Diseño gráfico</strong></a></td>
</tr>
</table>
</div>

CSS:

.apartados_home_elemento{ width:180px; display:inline-block; margin-right:80px;}
.elemento_texto1{ font-family: Verdana, Geneva, sans-serif; font-size: 10px; color:#FFF; line-height:14px; background-color:#000;}
.elemento_texto1 a:hover{color:#2EAADC;}

He intentado hacerlo insertando la etiqueta "<a...>de muchas formas y estoy por pensar que no se puede hacer...

¿Alguien me puede ayudar?

¡Muchas gracias!

Naahuel · #2 (**permalink**) 02/04/2011, 15:03

Lo que yo hacía cuando necesitaba hacer eso es usar el contenedor con position:relative y el <a> con position absolute y un ancho y alto del 100%. Algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style type="text/css">
    #caja-link{
      position:relative;
      padding-bottom:20px;
      width:200px;
      overflow:hidden;
    }
    #caja-link a{
      color:black;
      position:absolute;
      left:0;
      top:0;
      width:200px;
      height:20px;
      text-align:center;
      padding-top:200px;
      line-height:20px;
    }
    #caja-link a:hover{
      color:yellow;
    }
  </style>
</head>
<body>
  <div id="caja-link">
    <img src="http://1.bp.blogspot.com/_ytXYaNtqQ4U/ST2QQLZ9EfI/AAAAAAAAAWk/Nr4GAkyXU2o/s200/homer-simpson.png" />
    <a href="http://google.com">Google</a>
  </div>
</body>
</html>

Claro que en ese ejemplo hay mas estilos, pero no son dificiles de entender :P
Mirá acá lo podés ver:
http://jsbin.com/acupu5

Otra cosa que podés hacer es simplemente envolver todo el bloque en los <a></a>. Eso no está realmente permitido pues los anchors son elementos inline y no pueden contener elementos de bloque. Aún así funciona. Esto si está permitido en HTML5.

john_peretrucci · #3 (**permalink**) 02/04/2011, 18:15

Gracias por responder!

Por lo que he visto a ti si que te sale en el ejemplo que has mandado, pero cuando intento aplicarlo a lo mio no me sale...

Tal vez sea porque tengo una tabla o porque sean elementos inline, no lo se...

Intentaré ver si puedo hacerlo de otra manera... lo de insertar la etiqueta "a" envolviendo a la capa no me ha funcionado tampoco, pero si no va a ser un código válido entonces no me va a servir esa idea, jejeje!

Si pudieras conseguir que funcionara en el código que he enviado mio me lo haces saber

Muchas gracias!