18073 sujets

Questions générales et questions de débutants

Rotation de classe

Bonjour,

Le site de l'Institut Veolia Environnement ( http://www.institutveoliaenvironnement.org/fr ) propose un site XHMTL/CSS superbe. Aussi, à chaque rafraîchissement, l'image de fond, ainsi que la couleur de fond (background-color) change. L'agence a ainsi défini une classe qui tourne dans la feuille de styles externe (.default, .climat, .societe, .sante, .urbain, .environnement). Chaque classe fait tourner une couleur et une image. Mais, je n'arrive pas à savoir comment l'agence s'y prend ??
Un script php pour les images n'est sans doute pas la méthode. Là, c'est la classe qui tourne, et donc les styles qui font avec...
Si quelqu'un peut éclairer ma lanterne. Je cale !

Peuvent-ils utiliser un script php pour faire tourner une classe, au lieu d'une image ? J'ai trouvé un script de rotation d'image sur ALA, mais là, je ne vois si c'est la méthode ?????????

Merci.

Arnaud

PS: la charte graphique d'alsacréations.fr est magnifique. Merci à Raphaël de m'avoir donné l'inclinaison pour les styles CSS.
Bon vent à votre agence !

PPS: Si cette question a déjà été posée, veuillez m'en excuser ! Je n'ai pas trouvé ce sujet.

EDIT par Felipe: URL cliquable
Modifié par Felipe (26 Feb 2006 - 21:50)
Bon, disons que j'ai 5 styles définis, avec 5 classes fond1, fond2, fond3, fond4, fond5.
En PHP, je crée une variable de type array contenant des valeurs du type :
| 0 | fond1 |
| 1 | fond2 |
| 2 | fond3 |
| 3 | fond4 |
| 4 | fond5 |


Tu tires une valeur n avec la fonction n = rand(0,4)
Et dans ton code HTML tu vas générer dynamiquement le nom de la classe à utiliser, en faisant appel à la bonne valeur du tableau.

Mais il y a peut-être plus simple…
Salut,

Encore plus simple quand on regarde le code :

/* Page
---------------------- */
#page {background: #fff url(i/backgrounds/page.gif) 0 0 repeat-y}
#page.climat {background-image: url(i/backgrounds/page_climat.gif)}
#page.societe {background-image: url(i/backgrounds/page_societe.gif)}
#page.sante {background-image: url(i/backgrounds/page_sante.gif)}
#page.urbain {background-image: url(i/backgrounds/page_urbain.gif)}
#page.environnement {background-image: url(i/backgrounds/page_environnement.gif)}

/* Wrapper
---------------------- */
#wrapper {min-height: 625px; height: auto; background: url(i/backgrounds/page_blooming_tree.jpg) 230px 0 no-repeat}
.climat #wrapper {background-image: url(i/backgrounds/page_climat.jpg)}
.societe #wrapper {background-image: url(i/backgrounds/page_societe.jpg)}
.sante #wrapper {background-image: url(i/backgrounds/page_sante.jpg)}
.urbain #wrapper {background-image: url(i/backgrounds/page_urbain.jpg)}
.environnement #wrapper {background-image: url(i/backgrounds/page_environnement.jpg)}


et dans le html

<div id="page" class="climat">
...


en fonction de la page
Sujet clos
Aller à