Hola, Javier.
La página que mencionas funciona tanto con javascript como sin él.
Los pequeños botones que permiten conmutar de color son elementos "anchor"
en el código fuente:
<a id="red" href="?style=red" onclick="set_style(this);return
false;">red</a>
<a id="orange" href="?style=orange" onclick="set_style(this);return
false;">orange</a>
<a id="yellow" href="?style=yellow" onclick="set_style(this);return
false;">yellow</a>
[...]
CON JAVASCRIPT
Si tienes activado javascript, cuando pulsas en uno de los enlaces se
ejecuta la función *set_style()* que está dentro de *scripts.js*. A esta
función se le envía como parámetro el enlace en sí (*this*) y usa el valor
del atributo "*id*" para construir la dirección de la hoja de estilos.
function set_style(obj){
if(!document.getElementById) return false;
var sheet=document.createElement('link');
sheet.setAttribute('rel','stylesheet');
sheet.setAttribute('media','all');
sheet.setAttribute('href',_siteRoot+'css/'+obj.id+'/colour.css');
document.body.appendChild(sheet);
var img=new Image();
img.src=obj.href;
}
SIN JAVASCRIPT
Si el navegador no tiene activado javascript, se envía al servidor el color
correspondiente como parámetro en la url. Así, por ejemplo, cuando pulsas en
el botón rojo y no tienes javascript, verás que la barra de direcciones de tu
navegador muestra lo siguiente:
http://www.nue-media.com/?style=red
El parámetro *style* con el valor *red* es usado por el servidor para
incluir la siguiente línea en el código fuente.
<link rel="stylesheet" href="/css/red/colour.css" type="text/css"
media="all" />
Si tecleas directamente lo siguiente:
http://www.nue-media.com/?style=yellow
Podrás comprobar cómo cambia el código fuente:
<link rel="stylesheet" href="/css/yellow/colour.css" type="text/css"
media="all" />
Saludos
El 16 de enero de 2009 19:23, Javier Guerrero <demix...@gmail.com> escribió:
> Es decir, si visitan esta página:
>
> http://www.nue-media.com/
>
> verán que en la parte superior hay una paleta de colores en el que se
> puede
> seleccionar un color, el cual cambia en la botonera y en los titulares del
> cuerpo de la página, mi preguntas son ¿cuál es el nombre de este efecto?
> ¿como sería la hoja de estilos para esto? ¿utiliza algún plugin en
> particular de las librería javascript que utilizar para dicho efecto?
>
> Saludos
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
