Un stylesheet aléatoire

Version imprimable

Bonjour,

Je suis en ce moment en train de refondre le site de la promo SRC Chambéry et j'aimerai savoir s'il est possible de changer le aléatoirement la feuille de style lié aux pages du site.

voila ce que j'ai:

Code:

1
2
3
4
5
6
7
 
       <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" title="default" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/citron.css" media="screen" title="citron" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/orange.css" media="screen" title="orange" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/green.css"  media="screen" title="green" />	
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/violet.css"  media="screen" title="violet" />

et j'aimerais que

Code:

rel="stylesheet"

puisse remplacer n'importe quel

Code:

rel="alternate stylesheet"

afin de rendre aléatoire l'affichage du thème de site.

Le site en question: SRC-Website.fr

Bonjour et bienvenue dans les forums de Developpez.com! ;)

Il suffit de mettre les différents éléments dans un tableau et d'utiliser la fonction array_rand ou shuffle :
Code:

1 2 3 4 5 $tab=array('citron','orange','blue','green','violet'); $rand=array_rand($tab)[0]; // [0] est peut-être facultatif, à tester... echo '<link rel="alternate stylesheet" type="text/css" href="'.bloginfo('template_directory').'/'.$rand.'.css" media="screen" title="'.$rand.'" />'; unset($tab); unset($rand);

14/09/2008, 11h56
finaldofus

Merci beaucoup :D
Je test et je te dit si tout se passe bien.
14/09/2008, 12h01
Sub0

Arf, c'est un code PHP que je t'ai donné, pas Javascript (j'ai confondu le forum).

Apparemment ce n'est pas très concluent
J'ai mis ca:
Code:

1 2 3 4 5 6 7 <?php $tab=array('citron','orange','blue','green','violet'); $rand=array_rand($tab)[0]; echo '<link rel="alternate stylesheet" type="text/css" href="'.bloginfo('template_directory').'/'.$rand.'.css" media="screen" title="'.$rand.'" />'; unset($tab); unset($rand); ?>
Et on me dit qu'une erreur provient de la ligne:

Code:

$rand=array_rand($tab)[0];

J'ai essayé sans le 0 et rien n'y fait...

ps: le langage m'importe peu je souhaite juste que ça fonctionne :P

En Javascript, je peux te proposer ceci :

Code:

1
2
3
4
5
6
  <script type="text/javascript">
    var tab=document.getElementsByTagName('link');
    var cnt=(tab.length-1);
    var rand=Math.floor(Math.random()*cnt);
    for(i=0;i<cnt;i++) tab[(i+1)].disabled=(i!=rand);
  </script>

Alors autant en php je voyais un peu la logique, autant là j'ai du mal à vois comment procéder.

Je doit disposer ma page de cette façon?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <script type="text/javascript">
    var tab=document.getElementsByTagName('link');
    var cnt=(tab.length-1);
    var rand=Math.floor(Math.random()*cnt);
    for(i=0;i<cnt;i++) tab[(i+1)].disabled=(i!=rand);
  </script>
 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" title="default" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/citron.css" media="screen" title="citron" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/orange.css" media="screen" title="orange" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/green.css"  media="screen" title="green" />	
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/violet.css"  media="screen" title="violet" />

J'ai fais une erreur dans le code PHP, corrige comme ceci :

Code:

$rand=$tab[array_rand($tab)];

Citation:

Envoyé par finaldofus

Je doit disposer ma page de cette façon?

non, comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" title="default" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/citron.css" media="screen" title="citron" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/orange.css" media="screen" title="orange" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/green.css"  media="screen" title="green" />	
	<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/violet.css"  media="screen" title="violet" /> 
 
  <script type="text/javascript">
    var tab=document.getElementsByTagName('link');
    var cnt=(tab.length-1);
    var rand=Math.floor(Math.random()*cnt);
    for(i=0;i<cnt;i++) tab[(i+1)].disabled=(i!=rand);
  </script>

14/09/2008, 12h45
finaldofus

Ça ne marche pas mais ça viens peut-être de moi...
Si tu as le temps (je t'en ai déjà pris pas mal), tu peu modifier le fichier en question:
http://src-website.fr/header.zip

Finalement, je te conseille plutôt l'utilisation du PHP (code corrigé)

Code:

1
2
3
4
5
$tab=array('citron','orange','blue','green','violet');
$rand=$tab[array_rand($tab)];
echo '<link rel="alternate stylesheet" type="text/css" href="'.bloginfo('template_directory').'/'.$rand.'.css" media="screen" title="'.$rand.'" />';
unset($tab);
unset($rand);