Botón hundido

tsanchez · #1 (**permalink**) 21/03/2005, 05:10

Hola a todos.

Me gustaría saber si se puede hacer (seguro que sí) y si es así, cómo hacer, lo siguiente.

Quiero que al pulsar sobre una celda de una tabla dé la sensación de que se hunde, pero no quiero que al soltar el botón del ratón, vuelva a su estado inicial. Es decir, quiero que se quede pulsado que al pinchar sobre él, vuelva a su estado inicial.

No me importa si se hace con elementos "button" dentro de una celda. Lo que sí me gustaría es que al hacer "click" se quede pulsado y que al hacer de nuevo "click" vuelva a su estado inicial.

Muchas gracias por adelantado.

Un saludo,

Tomás

JavierB · #2 (**permalink**) 21/03/2005, 05:30

Hola tsanchez

A ver si esto te sirve:

Código PHP:

  <html> 
<head> 
<title>Untitled</title> 
<script> 
function borde(obj) { 
  if(obj.style.borderStyle.indexOf('outset')!=-1) 
    obj.style.borderStyle='inset'; 
  else 
    obj.style.borderStyle='outset'; 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td style="border:2px inset" onclick="borde(this)">aaaaaaaa</td> 
</tr> 
</table> 
</body> 
</html>

Saludos,

tsanchez · #3 (**permalink**) 21/03/2005, 07:40

Muchísimas gracias, JavierB.

Es justo lo que necesitaba.

Un saludo,

Tomás

JavierB · #4 (**permalink**) 21/03/2005, 09:14

Me alegro de que te haya resultado útil. Hasta pronto

KarlanKas · #5 (**permalink**) 21/03/2005, 10:03

Javieeeeerr... que tienes que reducir el coooodigo

<html>
<head>
<title>Untitled</title>
<script>
function borde(obj) {
obj.style.borderStyle=(obj.style.borderStyle=='out set')?'inset':'outset';
}
</script>
</head>
<body>
<table>
<tr>
<td style="border-style:inset; border-width:1x;padding:5px;" onclick="borde(this)">Hola!</td>
</tr>
</table>
</body>
</html>

Un saludo!!

JavierB · #6 (**permalink**) 21/03/2005, 10:27

KarlanKaaaaaass... que tienes que reducir el coooodigo

<td style="border:1px inset;padding:5px;" onclick="borde(this)">Hola!</td>

Además fijate en un detalle: en Firefox al consultar el valor de obj.style.borderStyle te devuelve outside outside outside outside, mientras que en IE solo devuelve outside. Así que la función debería quedar algo así:

Código:

function borde(obj) {
obj.style.borderStyle=(obj.style.borderStyle.indexOf('outset')!=-1)?'inset':'outset';
}

Saludos,

P.D. Ya te habrás dado cuenta que vBulletin pone espacios donde le parece. En este caso ha separado la palabra indexOf