NEURONASOFT: css - enlace que afecte a todo el ancho y alto de la celda td

En estos tiempos acelerados, cualquier pregunta técnica es motivo para hacer un post ;)
Así que aprovechemos la pregunta que un buen amigo acaba de hacerme:
Cómo hago para que al poner un enlace o link dentro de una celda… al pasar el cursor sobre el enlace… no sólo se active el enlace… sino que se active toda la celda (vean la imagen)…
Y además, que al pulsar sobre cualquier parte dentro de la celda, se active el link. Está claro no?

Y cómo se ha construído la imagen? simplemente es una tabla con 4 celdas td, y cada celda tiene insertado un control hyperlink y… para hacerlo agradable a la vista, en lugar de ponerle texto al link, les he puesto una imagen.

Y en qué funcionalidad podrías usar este código? te daré sólo un caso, el resto lo sugieres tú (en un comentario), podrías usarlo por ejemplo al crear un Calendario de actividades, en lugar de hacer click sobre la fecha, podrías hacer que se active el enlace en toda la celda td.

Pero nada mejor que pasar al código para experimentar el efecto. Copien y peguen el sgte código dentro de una página aspx y luego ejecútenla para verla en acción:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Enlace sobre toda la celda...</title>
<style type="text/css">
*{  font-family: Trebuchet MS;  }
td
{   width: 150px;
height: 150px;
background-color: Yellow;
}
td:hover
{ background-color: orange;
}
td a
{   display: block;
height: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tr>
<td>
<asp:HyperLink ID="HyperLink1" ImageUrl="http://www.curso-ingles.com/images/vocab/cat_orange.gif"
NavigateUrl="http://www.google.com" runat="server"></asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink2" ImageUrl="http://www.curso-ingles.com/images/vocab/shark_3.gif"
NavigateUrl="http://www.google.com" runat="server"></asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink3" ImageUrl="http://www.curso-ingles.com/images/vocab/baner_final.gif"
NavigateUrl="http://www.google.com" runat="server"></asp:HyperLink>
</td>
<td>
<asp:HyperLink ID="HyperLink4" ImageUrl="http://www.curso-ingles.com/images/clipart/bats_002.gif"
NavigateUrl="http://www.google.com" runat="server"></asp:HyperLink>
</td>
</tr>
</table>
</form>
</body>
</html>

La carnecita está en el css, sobretodo en esta parte:

td a
{   display: block;
height: 100%;
}

Lo que ese fragmento hace es cambiarle el estilo display: inline que tienen por defecto los enlaces, hacia un display: block.

Espero que les sea de utilidad ;)

NEURONASOFT

Páginas

jueves, 16 de setiembre de 2010

css - enlace que afecte a todo el ancho y alto de la celda td

1 comentario: