cambio de color de celdas

sergi_climent · #1 (**permalink**) 25/01/2006, 03:21

Buenos dias...
tengo un menu echo con css q al pasar el mouse por encima se cambia de color.

Código:

.menu1 {
	font-size: 11px;
	width:150px;
	height:15px;
	background-color: #CCCCCC;
	color: #000000;
	font-weight: normal;
}

.menu1 a:link, .menu1 a:visited 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	width:150px;
	height:15px;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
}

.menu1 a:hover,.menu1 a:active
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #0A81CA;
	color: white;
}

La pagina esta divida en 2 frames, uno q es el menu y el otro es el main... me gustaria saber si se puede dejar un color diferente el link seleccionado y q no cambie a color normal hasta q se vuelva a clickar en el menu...
como puedo hacerlo?

Gracias de antemano,

Saludos

sergi_climent · #2 (**permalink**) 26/01/2006, 09:08

buenas tardes!

Alguna idea de como hacer ese menu?

Gracias

Acadio · #3 (**permalink**) 26/01/2006, 09:42

Con JavaScript.
Busca algun Script en el Google que cambie dinamicamente los estilos de los links.

sergi_climent · #4 (**permalink**) 26/01/2006, 09:47

si eso ya lo encontrado... lo q no encuentro es lo de dejar el link de un color diferente al resto mientras estoy consultando ese apartado...

JavierB · #5 (**permalink**) 26/01/2006, 09:56

Hola sergi_climent

Echa un vistazo a este mesaje a ver si te ayuda:

http://www.forosdelweb.com/f13/cambiar-color-fondo-div-hacer-clic-uno-u-otro-sin-resolver-365217/

Saludos,

Acadio · #6 (**permalink**) 26/01/2006, 10:42

Hombre a ver , yo no me referia a un simple ahover..

document.getElementById(menu).setAttribute("class" ,newClass);

sergi_climent · #7 (**permalink**) 26/01/2006, 10:55

me sirve pero no consigo adaptarlo...
he conseguido adaptar el codigo pero me da un error... al intentar abrir el link... me dice q se requiere un objeto en la linea 20 y la linea 20 es la 3era funcion.
De javascript no domino mucho... aver si me podeis echar una mano...

Código HTML:

<script>
		var pepe=null; //***
		function mano(cual){
		document.body.style.cursor='hand';
		cual.style.backgroundColor='#0A81CA';
		};
		
		 function flecha(cual){
			document.body.style.cursor='default';
			cual.style.backgroundColor=(cual==pepe)?'red':'#CCCCCC';
		}
		
		function abrir(pag,e){
		elemento = document.getElementById(e);
		if (pepe){pepe.style.backgroundColor='#0A81CA';}
			pepe = elemento; //***
			elemento.style.backgroundColor = 'red';			
			parent.main.location.href=pag;
		}

</script>
...
<td>
   <div id="noticia" STYLE="background:#CCCCCC"  name="noticia" OnMouseOver="mano(this)" onmouseout="flecha(this)" onClick="abrir('noticia.php','perico')">Puntos de Venta</div>
</td>

Gracias por todo

JavierB · #8 (**permalink**) 26/01/2006, 11:07

Hola de nuevo.

en el evento onclick el segundo parámetro tiene que ser el id del <div> que pulsar. Tú has puesto:

onclick="abrir('noticia.php','perico')

y debería ser:

onclick="abrir('noticia.php','noticia')

A ver si así te funciona. Saludos,

sergi_climent · #9 (**permalink**) 26/01/2006, 11:14

jaja... no me dado cuenta... lo tenia puesto como prueba pero igualmente si pongo abrir('noticia.php','noticia') me sigue dando el mismo error..
hay alguna funcion q no tenga?
se puede hacer algo parecido en <a href="direccion" target="main" onmousever="" onmouseout=""... > ????

ludovico2000 · #10 (**permalink**) 26/01/2006, 12:04

...pues a mi me funciona perfectamente...

sergi_climent · #11 (**permalink**) 27/01/2006, 01:23

ya encontre el error q tenia... el problema q tenia es q tengo el menu dinamico, es decir, q lo cargo casi todo de una consulta y me deje un parametro q no era dinamico y se repetia en cada div, luego aki me daba el error.

Gracias x todo a todos,

Saludos

sergi_climent · #12 (**permalink**) 27/01/2006, 10:54

una cosita mas...
como puedo alinear el texto q hay dentro de los div. Si creo el menu con unas celdas anchas el texto siempre se me keda arriba. ya he probado alinear el td q contiene el div, tambien he probado con la propiedad style:"text-align"y nada... lo que no encuentro el valign=middle q es lo q me haria falta en el div.

Gracias de antemano,

Saludos

sergi_climent · #13 (**permalink**) 30/01/2006, 09:12

alguna idea de como puedo hacer para alinear el texto???

Muchas gracias!

Saludos

ludovico2000 · #14 (**permalink**) 30/01/2006, 13:14

No metas el div en una tabla, mete una tabla en el div:

prueba esto:

Código:

<html>
<head>
</head>
<body>

<div STYLE="background:#A5A7FF;width:100px;height:60px"  name="textodiv1">
 texto div 1
</div>

<div STYLE="background:#B5B7FF;width:100px;height:60px"  name="textodiv2">
 <table width="100px" height="60px">
  <tr>
   <td>
    texto div 2
   </td>
  </tr>
 </table>
</div>

<div STYLE="background:#C5C7FF;width:100px;height:60px"  name="textodiv3">
 <table width="100px" height="60px">
  <tr>
   <td valign="middle">
    texto div 3
   </td>
  </tr>
 </table>
</div>

<div STYLE="background:#D5D7FF;width:100px;height:60px"  name="textodiv4">
 <table width="100px" height="60px">
  <tr>
   <td align="center">
    texto div 4
   </td>
  </tr>
 </table>
</div>

<div STYLE="background:#E5E7FF;width:100px;height:60px"  name="textodiv5">
 <table width="100px" height="60px">
  <tr>
   <td valign="middle" align="center">
    texto div 5
   </td>
  </tr>
 </table>
</div>

</body>
</html>

A ver si es lo que quieres

sergi_climent · #15 (**permalink**) 31/01/2006, 09:07

si lo hago asi entonces la propiedades del texto q tengo echo en javascript no me iran!

Código HTML:

<html>
<head>
	<title>Roler</title>
	<link rel="stylesheet" type="text/css" href="/esp/css/estils.css">
	<script>
		var pepe=null; //***
		function mano(cual){
		document.body.style.cursor='hand';
		cual.style.backgroundColor='#0A81CA';
		cual.style.color='#FFFFFF';
		cual.style.fontSize='11px';
		}
		
		 function flecha(cual){
			document.body.style.cursor='default';
			cual.style.backgroundColor=(cual==pepe)?'#0A81CA':'#CCCCCC';
			cual.style.color=(cual==pepe)?'#FFFFFF':'#000000';
			cual.style.fontSize='11px';
		}
		
		function abrir(pag,e){
		elemento = document.getElementById(e);
		if (pepe){
			pepe.style.backgroundColor='#CCCCCC';
			pepe.style.color='#000000';
			pepe.style.fontSize='11px';
		}
			pepe = elemento; //***
			elemento.style.backgroundColor = '#0A81CA';	
			elemento.style.color='#FFFFFF';
			elemento.style.fontSize='11px';
			window.parent.frames[2].location.href=pag;
		}
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" class="cuadre">
<tr valign="middle">
<td valign="middle" align="center" colspan="3">
<?
$sql_familia = "SELECT DISTINCT familia.codi_familia,nom_familia 
				 FROM familia, rel_famesp_articles
				 WHERE rel_famesp_articles.codi_familia=familia.codi_familia
				 AND codi_familia_especial=".$codi_fam_esp;
$qry_familia = mysql_query($sql_familia);
?>
	<table width="100%" height="90%"cellpadding="0" cellspacing="0" border="1">
		<tr valign="middle">
		<? 
			while ($row_familia = mysql_fetch_array($qry_familia)){ 
			$codifamilia=$row_familia[codi_familia];
			$i++;
		?>
		<td align="center">
<div id="<? echo $i ?>" name="<? echo $i?>" align="center"OnMouseOver="mano(this)" onMouseOut="flecha(this)" STYLE="text-align:center;font-family:Verdana, Arial, Helvetica, sans-serif; height:35;font-size:11px;background:#CCCCCC;" onClick="abrir('articles.php?codifamilia=<? echo $codifamilia?>&codi_fam_esp=<? echo $codi_fam_esp?>','<? echo $i ?>')"><? echo $row_familia[nom_familia]; ?></div>
		</td>
		<? } ?>
		
	</tr>
	</table>
</td>
</tr>
</table>
</body>
</html>

ludovico2000 · #16 (**permalink**) 31/01/2006, 09:48

...

...pues no sé cómo se podría hacer entonces... igual la derecha acaba siendo utilizar imágenes que hacen rollover y ya está...

Acadio · #17 (**permalink**) 06/02/2006, 02:11

Mira este ejemplo, es muy bueno http://www.webintenta.com/Cambiar-el...mouseover.html

sergi_climent · #18 (**permalink**) 13/02/2006, 05:48

una cosa mas...
si el menu recarga sobre la misma pagina me pierde la propiedad del cambio de color.
Como puedo solucionarlo?

Grácias de antemano,

Saludos

Acadio · #19 (**permalink**) 14/02/2006, 11:17

Pasale una variable del menu que fue marcado cada vez por POST y al recargar la pagina, ese tendra que tener la clase que le corresponda a cuando esta marcado.

Un saludo.

sergi_climent · #20 (**permalink**) 01/03/2006, 02:06

hola de nuevo...
he vuelto otra vez con este tema.. ya q lo deje x q tenia otro trabajo mas importante q un cambio d colores...
tengo el siguiente codigo en javascript:

Código:

<script>
	var pepe=null; //***
	function mano(cual){
	document.body.style.cursor='hand';
	cual.style.backgroundColor='#0A81CA';
	cual.style.color='#FFFFFF';
	cual.style.fontSize='11px';
	}
	
	 function flecha(cual){
		document.body.style.cursor='default';
		cual.style.backgroundColor=(cual==pepe)?'#0A81CA':'#002E5E';
		cual.style.color=(cual==pepe)?'#FFFFFF':'#000000';
		cual.style.fontSize='11px';
	}
	
	function abrir(pag,e){
	elemento = document.getElementById(e);
	if (pepe){
		pepe.style.backgroundColor='#002E5E';
		pepe.style.color='#000000';
		pepe.style.fontSize='11px';
		}
		pepe = elemento; //***
		elemento.style.backgroundColor = '#0A81CA';	
		elemento.style.color='#FFFFFF';
		elemento.style.fontSize='11px';
		window.parent.frames[1].location.href=pag;
	}
</script>

y lo llamo desde un div q lo creo dinamicamente:

Código HTML:

<div id="<? echo $row_articles[codi_article] ?>" align="center" STYLE="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;background:#002E5E;width:110px;" name="<? echo $row_articles[codi_article] ?>" OnMouseOver="mano(this)" onMouseOut="flecha(this)" onClick="abrir('ficha.php?codiarticle=<? echo $row_articles[codi_article]?>&codifamilia=<? echo $codifamilia?>','<? echo $row_articles[codi_article] ?>')">

como hago para pasar la variable javascript cuando recargo la misma pagina?

Gracias de antemano,

Saludos