problema con bordercolor

ludovico2000 · #1 (**permalink**) 16/06/2004, 09:11

Hola:

Gracias a la ayuda de varios foreros, he logrado hacer una función bastante chula para dar un efecto de encendido al pasar el ratón.

La pega está en que la parte que debe cambiar el color del borde de la fila no va. (Poniendo "a mano" el bordercolor en la fila <tr> sí va, pero no en la función).

<script languaje='javascript'>
function manita(zein)
{
document.body.style.cursor='hand';
zein.style.backgroundColor='#00ffff';
zein.style.borderColor='red';
};
function flecha(zein)
{
document.body.style.cursor='default';
zein.style.backgroundColor='#00ddff';
zein.style.borderColor='black';
};
</script>

...

<tr ... onmouseover="manita()" onmouseout="flecha()">

La parte de "backgroundcolor" sí que va perfectamente... pero bordercolor no...¿Alguien puede ayudarme?

COMPARTIENDO, MEJORAMOS TODOS

aitzi · #2 (**permalink**) 16/06/2004, 09:38

yo si tengo que cambiar tantas propiedades cambio solo "className" y me creo dos estilos, uno para el over y otro para el estado normal.

Si no quieres cambiar tanto, quiza la parte de los bordes del css te sirva.

onmouseover="javascript:cambiaEstilo(this,'encima' );" onmouseout="javascript:cambiaEstilo(this,'siempre' );"

function cambiaEstilo(objeto,estilo)
{ objeto.className=estilo;
}

.siempre
{
BORDER-RIGHT: #000000 1pt solid;
BORDER-TOP: #000000 1pt solid;
BORDER-LEFT: #000000 1pt solid;
BORDER-BOTTOM: #000000 1pt solid
}

.encima
{
BORDER-RIGHT: #ff0000 1pt solid;
BORDER-TOP: #ff0000 1pt solid;
BORDER-LEFT: #ff0000 1pt solid;
BORDER-BOTTOM: #ff0000 1pt solid
}

ludovico2000 · #3 (**permalink**) 17/06/2004, 07:58

Lo siento, pero no he sabido aplicar tu respuesta, la he puesto como una función (entre etiquetas <script> entre el head y el body) y nada. Supongo que con esto demuestro que no tengo ni idea de css...

¿ayuda, por favor?

PatomaS · #4 (**permalink**) 17/06/2004, 09:08

Hola

El código que te pasan debe quedar así:

Código:

<html>
<head>
<style type="text/css">
.siempre
{
BORDER-RIGHT: #000000 1pt solid;
BORDER-TOP: #000000 1pt solid;
BORDER-LEFT: #000000 1pt solid;
BORDER-BOTTOM: #000000 1pt solid
}

.encima
{
BORDER-RIGHT: #ff0000 1pt solid;
BORDER-TOP: #ff0000 1pt solid;
BORDER-LEFT: #ff0000 1pt solid;
BORDER-BOTTOM: #ff0000 1pt solid
}
</style>
<script type="text/javascript">
<!--
function cambiaEstilo(objeto,estilo)
{ objeto.className=estilo;
}
//-->
</script>
<title>el título de tu página</title>
</head>
<body>
todo el contenido de la página
...
</body>
</html>

Y por supuesto, la función que tú ya tienes sigue donde la tengas, que supongo es en el head y la tenías dentro de la etiqueta script.

Suerte

Felicidad

living · #5 (**permalink**) 17/06/2004, 09:09

Siempre puedes poner esto en vez de zein.style.borderColor='red' :

for(i=0;i<zein.cells.length;i++){
zein.cells[i].style.borderColor="'red' ";
}

ludovico2000 · #6 (**permalink**) 17/06/2004, 10:15

Lo siento, pero no funciona ni con css tal y como me indicaron aitzi y patomas (gracias a ambos) ni con la función de living...

En cualquier momento, me va a salir un alert que dirá: "-Sigue buscando, hay miles de premios-"....

SI TUVIERA DINERO ORGANIZARÍA UN CONCURSO CON UN IMPORTANTE PREMIO PARA QUIEN SOLUCIONARA ESTO: EL CANNONBALL DE JAVASCRIPT...

(Gracias a todos, realmente no es algo "de vida o muerte", pero ya es por orgullo... ¡¡¡Tiene que ser posible!!!)

tunait · #7 (**permalink**) 18/06/2004, 00:42

Buenas,

parece ser que el atributo border no es aplicable a las filas. Prueba a aplicárselo a celdas y sí te funcionará

JavierB · #8 (**permalink**) 18/06/2004, 04:37

Hola a todos.

Dejo un poco de código por si sirve de ayuda:

Código HTML:

<html>
<head>
<script>
function mostrar(obj) {
	celda=obj.getElementsByTagName('td');
	num=celda.length-1;
	bor='1px solid black';
	for(i=0;i<celda.length;i++) {
		celda[i].style.borderTop=bor;
		celda[i].style.borderBottom=bor;
		if(i==0)
			celda[i].style.borderLeft=bor;
		if(i==num)
			celda[i].style.borderRight=bor;
	}
}
</script>
</head>

<body>
<table width="75%" border="0">
  <tr onmouseover="mostrar(this)">
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr onmouseover="mostrar(this)">
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
</table>
</body>
</html>

Saludos,

ludovico2000 · #9 (**permalink**) 19/06/2004, 14:14

¡¡¡¡¡¡¡¡¡¡funciona!!!!!!!!!!!!!

MUCHAS GRACIAS A TODOS/AS, en especial a JavierB

:

(Sin olvidar a Aitzi, PatomaS, Living y Tunait)

<html>
<head>
<script>
function mostrar(obj) {
celda=obj.getElementsByTagName('td');
num=celda.length-1;
bor='1px solid white';
for(i=0;i<celda.length;i++) {
celda[i].style.borderTop=bor;
celda[i].style.borderBottom=bor;
if(i==0)
celda[i].style.borderLeft=bor;
if(i==num)
celda[i].style.borderRight=bor;
};
}

function ocultar(obj) {
celda=obj.getElementsByTagName('td');
num=celda.length-1;
bor='1px solid gold';
for(i=0;i<celda.length;i++) {
celda[i].style.borderTop=bor;
celda[i].style.borderBottom=bor;
if(i==0)
celda[i].style.borderLeft=bor;
if(i==num)
celda[i].style.borderRight=bor;
};
}
</script>
</head>
<body bgcolor="gold">
<table width="75%" border="0" border="1">
<tr onmouseover="mostrar(this)" onmouseout="ocultar(this)">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr onmouseover="mostrar(this)" onmouseout="ocultar(this)">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
</body>
</html>

JavierB · #10 (**permalink**) 20/06/2004, 03:19

Me alegro de que te haya servido. Otra muesca para mi revolver

(¿Podrían poner un emoticón con forma de vaquero?)