Foros del Web » Programando para Internet » PHP »

Como cambiar la CSS al hacer click sobre un link?

Estas en el tema de Como cambiar la CSS al hacer click sobre un link? en el foro de PHP en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 07/07/2005, 15:24
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Pregunta Como cambiar la CSS al hacer click sobre un link?

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?
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #2 (permalink)  
Antiguo 07/07/2005, 16:56
 
Fecha de Ingreso: julio-2003
Ubicación: España
Mensajes: 723
Antigüedad: 14 años, 4 meses
Puntos: 0
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.
__________________
Solo nosotros podemos decidir qué hacer con el tiempo que se nos ha dado. (Gandalf)
  #3 (permalink)  
Antiguo 07/07/2005, 17:47
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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...
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 07/07/2005, 18:50
 
Fecha de Ingreso: diciembre-2004
Mensajes: 163
Antigüedad: 13 años
Puntos: 2
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

  #5 (permalink)  
Antiguo 07/07/2005, 22:46
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Mensaje Gracias por responder, pero...

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?
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 08/07/2005, 10:15
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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>
__________________
oohh... quisiera ser godines!!!
  #7 (permalink)  
Antiguo 08/07/2005, 13:20
 
Fecha de Ingreso: diciembre-2004
Mensajes: 163
Antigüedad: 13 años
Puntos: 2
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.
  #8 (permalink)  
Antiguo 08/07/2005, 14:17
 
Fecha de Ingreso: mayo-2005
Mensajes: 84
Antigüedad: 12 años, 6 meses
Puntos: 0
<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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:10.