Error de sintaxis en css

itemc · #1 (**permalink**) 17/12/2009, 19:14

Hola a tod@s

Me pregunto si hay algun error de sintaxis en este css:

.menu:hover {
background-color: javascript:GetCookie('colormenu');
}

Es que tengo una funcion javascript que hace cookies, que se llama GetCookie y el valor de GetCookie es un color que tu seleccionas en un formulario, ese valor es el color de un menu cuando acercas el cursor (hover) pero el css no lo puede leer, o tal vez no se pueda hacer esto en css pero ayudenme

Gracias

zerokilled · #2 (**permalink**) 18/12/2009, 02:14

nunca he visto que css interprete codigo javascript. ¿fue algo que te inventastes o lo viste en algun lugar? en todo caso estoy seguro que no se puede hacer. las alternativas que conozco son con javascript o lenguaje servidor. en javascript, seria cuestion de leer la cookie y asignarle un estilo inline al documento.

Código:

document.body.style.backgroundColor =  // aqui invocas GetCookie;

en lenguaje servidor seria cuestion de leer la cookie y asignar el valor en un style o algun otro lugar. por ejemplo, en php no estoy seguro si se hace asi,

Código:

<style type='text/css'>
background-color: <?php echo $_COOKIES['nombre de cookie']; ?>
</style>

o podria ser una hoja de estilo pero habria que configurar el servidor para que php analice las hojas de estilo.

itemc · #3 (**permalink**) 18/12/2009, 15:27

pero este codigo:

document.body.style.backgroundColor

sirve para el "color de fondo" no?, o si servira en este caso?

....

Ademas, yo vi en una pagina que tu podias personalizar el color de fondo de un menu css, pero quien sabe, tal vez no se puede, gracias por tu ayuda! de todos modos

zerokilled · #4 (**permalink**) 18/12/2009, 15:54

es correcto, el codigo que mostre es para cambiar el color de fondo. desde javascript puedes personalizar cualquier cosa, desde el fondo del documento hasta el fondo de un elemento especifico.

JavierB · #5 (**permalink**) 18/12/2009, 15:57

Hola itemc

Muevo tu tema al foro de Javascript desde CSS.

Saludos,

Panino5001 · #6 (**permalink**) 18/12/2009, 16:10

Cita:

nunca he visto que css interprete codigo javascript. ¿fue algo que te inventastes o lo viste en algun lugar?

Bueno, no es algo demasiado natural, pero algunos navegadores sí soportan esa funcionalidad. En explorer se puede usar expression (http://www.adp-gmbh.ch/web/css/expression.html) o archivos .htc (http://www.xs4all.nl/~peterned/csshover.html). En firefox se puede usar xbl (https://developer.mozilla.org/en/XUL...duction_to_XBL) para ejecutar javascript en reglas css.

itemc · #7 (**permalink**) 18/12/2009, 16:48

Perfecto, pero en este caso usando expression() como quedaria?

algo así no?

expression(javascript:GetCookie('colormenu'););

mmm no creo

Panino5001 · #8 (**permalink**) 18/12/2009, 16:54

Habría que sacar ese javascript: y ver cómo está definida la función que toma la cookie y otras cosa, pero cuál es el sentido si expression sólo funciona en explorer?
Porqué mejor no usar javascript directamente y darle soporte a todos los navegadores?

itemc · #9 (**permalink**) 18/12/2009, 16:57

bueno......pero el problema es que no se involucrar estilos en javascript jejeje....

hay algún link por ahí??

Panino5001 · #10 (**permalink**) 18/12/2009, 17:05

Ah, ok, podés probar algo como esto (en valor1 o valor2 podés usar el valor que quieras, incluso el de retorno de tu función de obtención de cookie):

Código PHP:

  <!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<script> 
function addCss(cssCode,i) { 
    control=document.getElementById(i) 
    if(control) 
        document.getElementsByTagName("head")[0].removeChild(control) 
    var styleElement = document.createElement("style"); 
    styleElement.type = "text/css"; 
    if (styleElement.styleSheet) { 
        styleElement.styleSheet.cssText = cssCode; 
    } else { 
        styleElement.appendChild(document.createTextNode(cssCode)) 
    } 
    styleElement.id =i; 
    document.getElementsByTagName("head")[0].appendChild(styleElement); 
}  
</script> 
</head> 
 
<body> 
<a class="menu" href="#">menu</a> 
<script> 
var valor1='#CCC',valor2='red';; 
 
addCss('.menu{background-color:'+valor2+';}.menu:hover {background-color:'+valor1+';}','c') 
</script> 
</body> 
 
</html>

itemc · #11 (**permalink**) 18/12/2009, 17:47

gracias! funciona!