Como cambiar la CSS al hacer click sobre un link?

K3NNY · #1 (**permalink**) 07/07/2005, 14:24

Ya vi en varios lados que se puede elegir la CSS que mas nos guste de entre varias opciones que nos brinda la misma web, y me gustaria saber como hacen. Mil disculpas si no se hace con PHP. Estaba entre ponerlo aca o en Javascript, pero preferiria que se hiciera con PHP. Alguien tiene idea de como lo hacen?

DjNelson · #2 (**permalink**) 07/07/2005, 15:56

Pues si, primero tienes que guardar las posibles opciones en algún sitio, por ejemplo en una base de datos, si te interesa que cada usuario pueda poner su propia css entonces ahí es el sitio.

En la cabecera de la página envías una consulta a la base de datos preguntando por la css para ese usuario.

Si el usuario decide cambiar la css envías una consulta actualizando estas preferencias del usuario y redireccionas para recargar la página.

Cuando la página se recarga lee las nuevas preferencias del usuario y carga el css elegido.

Saludos.

safe · #3 (**permalink**) 07/07/2005, 16:47

hay otra opcion que es con javascript.. creas los dos archivos css (o mas) y a la etiqueta con la que relacionas el css le pones un ID... ej:

Código:

<link rel="stylesheet" href="estilo1.css" type="text/css" id="hojacss" />

y despues haces los botones de cada estilo y le pones algo como:

Código:

<a href="#" onClick="document.getElementById('hojacss').src = 'estilo1.css';">estilo 1</a>
<a href="#" onClick="document.getElementById('hojacss').src = 'estilo2.css';">estilo 2</a>

En realidad no lo he probado

pero en teoria deberia funcionar...

darkmasterr · #4 (**permalink**) 07/07/2005, 17:50

o en php con un switch:

Código PHP:

  switch($css){ 
case algo: 
include("algo.css"); 
break; 
case otro_algo: 
include("otro_algo.css"); 
break; 
... etc 
etc 
etc 
}

K3NNY · #5 (**permalink**) 07/07/2005, 21:46

DjNelson:

Perdon, me olvide de especificar eso. En la pagina no hay usuarios registrado, lo deberia poder cambiar cualquiera. La eleccion se va a guardar en una cookie.

safe:

Tu codigo tiene un pequeño error, en los tag "A" que hacen el cambio, donde dice .src deberia decir .href. Cambiando eso funciona

pero solamente en IE

. Lo ideal seria que funcione en todos los navegadores. Igual gracias...

darkmasterr:

Disculpame, todavia no soy muy ducho con PHP. Como puedo usar ese switch con un SelectBox?

safe · #6 (**permalink**) 08/07/2005, 09:15

hola K3NNY.. me imagina que no podia funcionar tan facilmente

...

Me aprece que lo primero que tenés que hacer es definir bien como querés hacer esto:

Con javascript (que el cambio se haga sin recargar la pagina) o Con PHP (necesitas recargar la pagina para realizar el cambio)...

Con los dos se puede hacer, solo es cuestion de elegir una forma y asi poder hacer consultas mas especificas.

Para javascript vi varias funciones por ahi...

Con PHP lo que podes hacer es usar lo que dice darkmaster en conjunto con sessiones. Seria algo asi:

Código PHP:

  <?php 
 
session_start(); 
 
if(!isset($_SESSION['css'])) 
{ 
    $_SESSION['css'] = 'normal'; 
} 
 
if(isset($_POST['estilo'])) 
{ 
    $_SESSION['css'] = $_POST['estilo']; 
} 
 
?>  
 
<html> 
<head> 
    <link rel="stylesheet" href="<?=$_SESSION['css']?>.css" type="text/css" /> 
</head> 
<body> 
<form action="<?=$_SERVER['PHP_SELF']?>" method="post"> 
    <select name="estilo"> 
        <option value="normal">Normal</option> 
        <option value="alternativo">Alternativo</option> 
    </select> 
    <input type="submit" value="cambiar" /> 
</form> 
</body> 
</html>

darkmasterr · #7 (**permalink**) 08/07/2005, 12:20

con los switch y para cambiar con links sería algo asi:

Código PHP:

  <?php 
switch($_GET['css']){ 
case estilo_1: 
include("estilo 1.css"); 
break; 
case estilo_2: 
include("estilo 2.css"); 
break; 
default: 
include("estilo por default"); 
break; 
}?>

Despues solo haces los links de esta manera:

Código HTML:

<a href="tu_pagina.php?css=estilo_1">Estilo 1</a>
<a href="tu_pagina.php?css=estilo_2">Estilo 2</a>

Para cambiar con un menu solo aplicas un formulario al mismo codigo.

Dulce Alejandra · #8 (**permalink**) 08/07/2005, 13:17

<html>
<head>
<script>
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
</script>
<LINK title=uno media=all href="estilo1.css" type=text/css rel=stylesheet>
<LINK title=dos media=all href="estilo2.css" type=text/css rel="alternate stylesheet">
</head>
<body>
<a class=estilo onclick="setActiveStyleSheet('uno'); return false;" href="http://www.cosaextrañadedominio.com/#">estilo 1</A>
<a class=estilo onclick="setActiveStyleSheet('dos'); return false;" href="http://www.cosaextrañadedominio.com/#">estilo 2</A>

</body>
</html>

Espero te sirva, saludos