imagen de fondo clickeable en celda de tabla

bea_81 · #1 (**permalink**) 07/01/2009, 08:00

Hola,

Tengo un problema con una imagen de fondo en la celda de una tabla.
Me explico, tengo una imagen que simula un boton y encima tengo puesto el texto.
Quiero hacer ese boton navegable y no solo el texto.
consigo que en IE7 funcione, pero para FF me corta la imagen y solo pone el fondo a lo que ocupa el texto. :(
¿Alguna idea?

Gracias por adelantado

webosiris · #2 (**permalink**) 07/01/2009, 11:05

hola bea, por favor no levantes temas antiguos y que no tienen relación con tu pregunta. muevo tu pregunta a un tema nuevo.

sobre tu mensaje, es muy dificil decirte algo sin ver nada de código

ssclamp · #3 (**permalink**) 10/01/2009, 12:46

Hola bea_81

No estoy seguro de haber entendido bien, pero aquí te dejo una celda que tiene una foto de fondo, sobre ella un texto centrado, y que toda la celda es clickeable. Es cross-browser, por lo menos se ve y funciona bien en ie, ff, opera y chrome.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Celda con foto de fondo y clickeable toda la celda</title>
<style type="text/css">
#capafoto {
	width: 250px; 
	height: 250px; 
	display: block; 
	cursor: pointer; 
	background-image:url('foto.jpg');
	position: relative;
	border: 1px solid #808080;
}
#rotulo {
	width: 250px;
	text-align: center;
	margin-top: 120px;
	position: absolute;
	top: 0px;
	left: 0px;
}
</style>
</head>

<body>

<table border="0" style="border-collapse: collapse" id="tabla-uno">
	<tr>
		<td>
			<div id="capafoto" onclick="self.location.href='destino.html';">
				<div id="rotulo">T E X T O</div>
			</div>
		</td>
	</tr>
</table>

</body>
</html>

Saludos