Celdas con enlace en toda la celda

alexmabo · #1 (**permalink**) 16/07/2011, 05:13

Hola a todos; y gracias por el interés que mostráis todos y por la cantidad de dudas y problemas que solucionáis a todos los miembros y visitantes.

Describo mi problema y debajo pongo los códigos que yo tengo para que veáis mejor el caso:

Tengo en una página una tabla con varias celdas; en cada una de estas celdas tengo hecho un enlace a otra página. Y cuando paso el cursor por estas celdas, sólo consigo que se active el enlace si me pongo exactamente encima de la palabra que hay dentro de lacenda, pero no si el cursor está fuera de la palabra, aunque dentro de la celda.
Lo que quiero es que toda la celda (palabra y espacio vacío) sea el enlace.
Además me gustaría que la celda y la palabra que hay dentro de ella siguieran conservando el cambio de color que se produce al poner el cursor sobre ellos.

Este es mi código:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Alex">
<meta name="GENERATOR" content="Mozilla/4.5 [es] (WinNT; I) [Netscape]">
<title>menu-cole</title>
<style>

</style>
</head>
<body text="#000000" bgcolor="#660000" link="#660000" vlink="#660000" alink="#CC0000">
 
<center><table BORDER CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BGCOLOR="#FFFFFF" >
<tr>
<td onmouseover="this.style.background="#FF9966&q uot;" onmouseout="this.style.background="white&quot ;">
<center><b><font face="Arial,Helvetica"><font color="#993300"><font size=-1><a href="situa.html" target="inferiord">Situación</a></font></font></font></b></center>
</td>

<td onmouseover="this.style.background="#FF9966&q uot;" onmouseout="this.style.background="white&quot ;">
<center><b><font face="Arial,Helvetica"><font color="#993300"><font size=-1><a href="informa.html" target="inferiord">Información
y Servicios</a></font></font></font></b></center>
</td>

<td onmouseover="this.style.background="#FF9966&q uot;" onmouseout="this.style.background="white&quot ;">
<center><b><font face="Arial,Helvetica"><font color="#993300"><font size=-1><a href="foto-anti.html" target="inferiord">Fotos
antiguas</a></font></font></font></b></center>
</td>
</tr>
</table></center>

<br> 
</body>
</html>

Gracias de antemano por vuestra ayuda.

Artificium · #2 (**permalink**) 16/07/2011, 09:40

Bien, para ello debes usar CSS, veo que casi no lo empleas. Aprende un poco de eso y después usa este consejo. A las celdas que contienen los enlaces pones padding 0, a los enlaces ponle algo de padding y display: block y asunto resuelto. Primero aprende algo de CSS, para que entiendas como funciona, si lo sabes, genial, solo usa el consejo, sino lo sabes aprende primero, porque si es así te debe a sonar chino el consejo, suerte!

alexmabo · #3 (**permalink**) 16/07/2011, 12:57

Artificium:
Te agradezco mucho tu respuesta; pero la verdad es que no tengo casi ni idea de esto. El código que puse ahí me lo confeccionó alguien que ahora ya no puede ayudarme.
Hasta ahora me había servido como estaba, pero he visto otras páginas en las que sale lo que yo necesito y se me ha ocurrido incorporarlo a mi página.
Tenía la esperanza de que alguien me escribiera el código de forma literal y yo luego ya lo aplicaba a las demás celdas y enlaces (ya sé que es muy atrevido por mi parte y por eso, antes de nada, pido disculpas).

Siguiendo tu consejo, en cuanto tenga algo de tiempo, me meteré con un tutorial de CSS.

Gracias de nuevo, Artificium, por la respuesta y por el consejo. Un saludo.

pitufoweb · #4 (**permalink**) 16/07/2011, 13:07

solo agrega; td a {display:block;} entre <style> </style>

Ejemplo:

<style>

</style>

Saludos

Artificium · #5 (**permalink**) 16/07/2011, 23:43

Cita:

Iniciado por alexmabo

Artificium:
Te agradezco mucho tu respuesta; pero la verdad es que no tengo casi ni idea de esto. El código que puse ahí me lo confeccionó alguien que ahora ya no puede ayudarme.
Hasta ahora me había servido como estaba, pero he visto otras páginas en las que sale lo que yo necesito y se me ha ocurrido incorporarlo a mi página.
Tenía la esperanza de que alguien me escribiera el código de forma literal y yo luego ya lo aplicaba a las demás celdas y enlaces (ya sé que es muy atrevido por mi parte y por eso, antes de nada, pido disculpas).

Siguiendo tu consejo, en cuanto tenga algo de tiempo, me meteré con un tutorial de CSS.

Gracias de nuevo, Artificium, por la respuesta y por el consejo. Un saludo.

No es tan atrevido pedir algo así, porque el código ese consiste en pocas líneas. Bien. Sólo agrega despues de estas lineas:

A:visited {text-decoration: none}
A:link {text-decoration: none}

todo esto:

a {
display: block;
padding: 3px 4px;

}
td {
padding: 0px;
}

Por cierto, tu código me trae nostalgia, es realmente un código arqueológico de los años 90. En fin, igual funciona, pero etiquetas como <font>? que horror.

alexmabo · #6 (**permalink**) 20/07/2011, 13:20

Pitufoweb y Artificium, os estoy muy agradecido a los dos por vuestras aportaciones. Un saludo y que tengáis un feliz verano.
Gracias a los dos.

Alexmabo

Artificium · #7 (**permalink**) 20/07/2011, 20:27

Verano? yo vivo en el Perú y acá estamos en invierno y está cayendo una llovisna persistente que en otros lugares sería un chiste, pero que aquí causa estragos porque es algo muy inusual, de todas maneras gracias por tus deseos.

alexmabo · #8 (**permalink**) 22/07/2011, 06:57

Artificium:
Siento lo de que estés en invierno, pero más aún los daños que habitualmente causan allá las lluvias. A menudo nos llega hasta nosotros información de esos desastres naturales de otras partes del mundo y la verdad es que es algo muy lamentable. No hace mucho viví de cerca algo parecido, pues tengo un familiar que reside en Chile y sufrió directamente los efectos del terremoto de 2010. Pero contra eso poco o nada se puede hacer, así que ánimo y mucha suerte y resignación.

Alexmabo

Artificium · #9 (**permalink**) 23/07/2011, 14:11

alexmabo, los dos hemos exagererado, yo cuando dije "estragos" y tú cuando no leíste que dije "llovisna" no "lluvia torrencial". Lo que yo denominé estragos no son más que agua emposada donde bien puede empozarse. Resulta que en Lima nunca llueve de verdad, a lo mucho caen llovisnas que nosotros llamamos lluvia, y como nunca llueve, pues las calles no tienen un sistema de alcantarillado donde el agua se escurra. Lo que causa una muy inusual lluvia persistente como la que estamos viviendo últimamente en Lima son molestias: zapatos mojados, agua empozada, tener que secarlo a mano, etc.

No estamos en un destrastre natural. Gracias a Dios.

alexmabo · #10 (**permalink**) 25/07/2011, 02:25

Artificium:
Lo había interpretado mal y celebro que sea algo leve.

Por cierto: perdona de nuevo mi atrevimiento, pero me ha surgido un pequeño contratiempo con otra presentación de imágenes con efecto fundido (fade creo que se llama):

Tengo un código en el que cinco imágenes van apareciendo automáticamente una tras otra con un efecto de fundido entre ellas. El problema es que tarda mucho (unos 12 segundos) hasta que se produce el primer cambio de imagen. Y lo más curioso es que no empieza por la imagen 01, sino que al empezar, ya aparece en pantalla la imagen 05. Cuando, después de 12 segundos, comienza a funcionar, pasa un instante a la imagen 04, de nuevo vuelve a la 05 y luego ya pasa a la 01 para seguir con normalidad.

He revisado todo varias veces pero no encuentro el error que motiva esto.

Te pego aquí debajo el código por si tú o alguien del foro puede ayudarme. Me interesa este efecto porque funciona con los tres navegadores más conocidos (IE, Mozilla y Chrome).

----------------------------------------------------------------------------
<htlm>
<head>
<script type='text/javascript'>
//<![CDATA[

window.addEventListener?window.addEventListener("l oad",so_init,false):window.attachEvent("onload",so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("imageContainer").getElementsByTa gName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
//]]>
</script>

<style>
#imageContainer {

position: relative;
}
#imageContainer {
height: 700px;
width: 350px;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>
</head>

<body>
 

<div id="imageContainer">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

</body>
</html>
-----------------------------------------------------------------------

Un saludo desde España.