Fiz um javascript para usar no meu portfólio.

Este script serve para alternar/alterar o estilo da página carregada através dos "alternates stylesheets", permitindo mudar todo layout sem reload(recarregar) da página.

Também reforça o uso de webstands e o layout via css, além de salvar a sessão em cookie para a próxima visita já usar o último layout escolhido.

• Download cssalt.js
• Enviar nova versão

Esconder código-fonte

// Para cada estilo alternativo, você deve definir no head assim:
// <link href="extras/estilos/segundo.css" rel="alternate stylesheet" type="text/css"  title="Dark" />
// E entao no onload do body, deve-se chamar a funcao start()
// Para mudar o css ativo basta chamar a funcao troca(txt), sendo txt o title do css a ser usado
// O estilo ativo é salvo nos cookies para ser usado na proxima atualização 
// A variavel padrao quarda o estilo basico caso nenhum estaja precarregado
// 
// by http://www.manifesto.blog.br/
   padrao = "basico" ;
   function troca(txt) 
      for(i=0;(a=document.getElementsByTagName("link")[i]);i++) {
         if (a.getAttribute("title") == txt) {
            a.disabled = false ;
         } else  {
            a.disabled = true ;
         }
      }
       setCookie("estilo",txt,"99",null,null,null,null);
   }
   function setCookie(name, value, expires, path, domain, secure) {
        var curCookie = name + "=" + escape(value) +
            ((expires) ? "; expires=2088" : "2098") +
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            ((secure) ? "; secure" : "");
        document.cookie = curCookie;
   }
   function getCookie(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) {
          begin = dc.indexOf(prefix);
       if (begin != 0) return null;
      } else
          begin += 2;
      var end = document.cookie.indexOf(";", begin);
      if (end == -1)
         end = dc.length;
       return unescape(dc.substring(begin + prefix.length, end));
   }
   function start() {
      txt = getCookie("estilo");
      if (txt == null) { txt = padrao ;   }
      troca(txt)
   }

Transparência no CSS

Mira no mouse

Slideshow

o html eo site todo

FUNDO QUE MUDA DE COR

Nenhum comentário foi encontrado.