Color de texto y celdas en una tabla

[raulco]

Hola amig@s:

favor vean esto y diganme que debo hacer para que al cambiar el color de fondo en las celdas del menu, tambien pueda cambiar el color del texto.

<style type="text/css">
A:hover { text-decoration: none }
.menu {
font-weight: bold; font-family: Tahoma; font-size: 7pt; color: #8515b8; text-decoration: none
}
</style>


*******////// este es el script que tengo

<script LANGUAGE="JavaScript">
<!--

function pulsar(src) {
if (event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}

function sicubrir(src,col01) {
if (!src.contains(event.fromElement)) {
src.style.cursor = 'hand';
src.Color = '#ffffff';
src.bgColor = col01;
}
}

function nocubrir(src,col02) {
if (!src.contains(event.toElement)) {
src.style.cursor = 'default';
src.Color= '#ffffff';
src.bgColor = col02;
}
}

// -->
</script>




*******////// y este es el cuerpo


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#000000" width="100%" id="AutoNumber3">
<tr>
<td width="50" height="20" bgcolor="#F3E0FC" style="border-bottom-COLOR: #F3E0FC" class="menu" align="center">INICIO</td>
<td width="75" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="001.htm">001</a></td>
<td width="75" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="002.htm">002</a></td>
<td width="50" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="003.htm">003</a></td>
<td width="70" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="004.htm">004</a></td>
<td width="90" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="005.htm">005</a></td>
<td width="310" bgcolor="#8515B8" style="border: 1px solid #8515B8" class="fecha" align="right"></td>
</tr>
<tr>
<td width="100%" bgcolor="#F3E0FC" colspan="7"><a class="texto">&nbsp;</a><center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#8515B8" width="95%" id="AutoNumber4" bgcolor="#FFFFFF">
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</center>
<a class="texto">&nbsp;</a></td>
</tr>
</table>

*******////// en esta direccion esta la pagina completa.

http://www.geocities.com/fexclamation/inicio.htm


saludos y bendiciones.

[raulco]

Por favor, al menos diganme que no se puede hacer

[derkenuke]

Lo he hecho mediante DOM. La cosa es que cambiabas el color del texto, y el color del texto cambiaba. Pero no hay texto dentro de las celdas, hay un enlace, asi que accedo a él mediante el hijo de la celda:

Código PHP:

  <style type="text/css"> 
A:hover { text-decoration: none } 
.menu { 
    font-weight: bold; font-family: Tahoma; font-size: 7pt; color: #8515b8; text-decoration: none; 
} 
.menu2 { 
    font-weight: bold; font-family: Tahoma; font-size: 7pt; color: #FFFFFF; text-decoration: none; 
} 
</style> 
 
 
*******////// este es el script que tengo 
 
<script LANGUAGE="JavaScript"> 
<!-- 
 
function pulsar(src) { 
    if (event.srcElement.tagName=='TD'){ 
        src.children.tags('A')[0].click(); 
    } 
} 
 
function sicubrir(src,col01) { 
    if (!src.contains(event.fromElement)) { 
        src.style.cursor = 'hand'; 
        src.childNodes[0].className = 'menu2'; 
        src.bgColor = col01; 
    } 
} 
 
function nocubrir(src,col02) { 
    if (!src.contains(event.toElement)) { 
        src.style.cursor = 'default'; 
        src.childNodes[0].className = 'menu'; 
        src.bgColor = col02; 
    } 
} 
 
// --> 
</script> 
 
 
 
 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#000000" width="100%" id="AutoNumber3"> 
<tr> 
<td width="50" height="20" bgcolor="#F3E0FC" style="border-bottom-COLOR: #F3E0FC" class="menu" align="center">INICIO</td> 
<td width="75" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="001.htm">001</a></td> 
<td width="75" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="002.htm">002</a></td> 
<td width="50" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="003.htm">003</a></td> 
<td width="70" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="004.htm">004</a></td> 
<td width="90" onclick="pulsar(this)" onMouseOver="sicubrir(this,'#F3E0FC')" onMouseOut="nocubrir(this,'#FFFFFF')" bgcolor="#FFFFFF" style="border: 1px solid #8515B8" align="center"><a class="menu" href="005.htm">005</a></td> 
<td width="310" bgcolor="#8515B8" style="border: 1px solid #8515B8" class="fecha" align="right"></td> 
</tr> 
<tr> 
<td width="100%" bgcolor="#F3E0FC" colspan="7"><a class="texto">&nbsp;</a><center> 
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#8515B8" width="95%" id="AutoNumber4" bgcolor="#FFFFFF"> 
<tr> 
<td width="100%">&nbsp;</td> 
</tr> 
</table> 
</center> 
<a class="texto">&nbsp;</a></td> 
</tr> 
</table>  
  

Notese la clase CSS "menu2".

[derkenuke]

Ah, por cierto, acabo de ver

Código PHP:

  function pulsar(src) {  
    if (event.srcElement.tagName=='TD'){  
        src.children.tags('A')[0].click();  
    }  
}  
   

Es otra manera de acceder al hijo, probablemente mas segura que la anterior, eliminando errores de nodos de texto "invisibles". Utilizalo si no lo logras con Firefox.

PD: El metodo click() solo funciona en IE.

[raulco]

Mil Gracias derkenuke

eres un mago.....

de verdad mis respetos.

taba facil pero no sabia hacerlos.

saludos.