web - Escrito por elizagarate en Sábado, noviembre 4, 2006 7:42 - 0 Comments

Crear un style switcher o alternador de estilos

En este post Francisco López de webintenta nos muestra como crear un "alternador de estilos. Lo reproduzco textualmente.

vamos a ir un poco más allá y crear un "style-switcher" o alternador de estilos. Lo primero que debemos tener es 2 o más estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y los otros dos con, por ejemplo, rel="alternativo stylesheet":

  1. <link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
  2. <link href="css2.css" rel="alternativo stylesheet" type="text/css" title="css2"/>

Posteriormente debemos tener una función Javascript que se encargue de cambiar de estilo, pasándole como parámetro el título del mismo:

  1. function EstablecerCSS(title) {
  2.       var i, a, main;
  3.       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  4.             if(a.getAttribute("rel").indexOf("style") != -1 &&
  5.                   a.getAttribute("title")) {
  6.                   a.disabled = true;
  7.             if(a.getAttribute("title") == title)
  8.         a.disabled = false;
  9.             }
  10.       }
  11. }

Y ahora tan sólo queda llamar a la función en el HTML:

  1. <div id="enlaces">
  2. <a href="javascript:EstablecerCSS(‘css1′);">Estilo 1</a>
  3. <a href="javascript:EstablecerCSS(‘css2′);">Estilo 2</a>
  4. </div>

Ver ejemplo en funcionamiento »»

Fuente | webintenta

| Share





Enter your email address:

Delivered by FeedBurner

Alumnos, Books - nov 28, 2009 8:30 - 0 Comments

Ricardo Vinent, antiguo alumno y diseñador vital.

Más en Books


Books

Alumnos, Flickr - mar 9, 2012 17:26 - 1 Comment

Control mediatico | Flickr: Malas ideas

Más en Alumnos


Alumnos Flickr

Usabilidad - sep 11, 2009 8:21 - 0 Comments

Diseñador, programador y usuario.

Más en Usabilidad


Usabilidad