Logo du forum
 

Forum TTH-News

| Inscription | | Recherche | | FAQ | | Accueil | | Liste des membres |
| Calendrier |
 
Vous n'êtes pas identifié! [Connexion] ou [Inscription] Forum » Programmation » [HTML / CSS] » Image aléatoire dans CSS
Login Mot de passe

3 visiteurs sur ce topic (0 membre(s), 3 invité(s) )

Auteur
Sujet : Image aléatoire dans CSS
Mzr



 






Message du 11-02-2008 @ 21:53


Bonjour à tous,

Voilà, je cherche à éditer et modifier un thème appliqué à une galerie coppermine.

J'ai quelques base en HTML, mais c'est tout.

Donc, j'ai trouvé le code qu'appelait mon image "headerbg.gif".

Code :

.header{
   background: url(images/headerbg.gif) no-repeat;
   width: 760px;
   height: 143px;
   float: left;
   }



Je cherche à remplacer ce code afin que cette image soit aléatoire... J'ai trouvé le code suivant :

Code :

<?
$imgs = array("image1.gif", "image2.gif", "image3.gif");
srand ((double)microtime()*1000000);
shuffle($imgs);
echo '<img src="repertoireimages/' . $imgs[0] . '" BORDER = "0" alt="" />';
?>



Le problème, c'est que c'est du PHP, et cette feuille de style a du mal à manger ce code ...

Quelqu'un aurait une idée pour afficher une image aléatoire ? Ou même changer d'image chaque jour ?
- Haut de page -
B2000



 






Message du 12-02-2008 @ 9:11

on ne peut pas faire du CSS dynamique... dans ton cas, tu peux faire du CSS pour parametrer le format de cette image par contre elle devra s'afficher a partir du PHP
- Haut de page -
Mzr



 






Message du 24-09-2008 @ 13:34

Petit :up:

Quelqu'un aurait une solution pour afficher mon image aléatoire depuis mon CSS ?

B200, si tu peux être plus explicite, je suis preneur !
- Haut de page -
Koyote



 






Message du 24-09-2008 @ 14:37

surcharge le style de ton header dans ta page php directement dans la balise.
Ainsi tu profiteras du côté dynamique de php mon la jouer aléatoire sur ton style
Code :


<?
$imgs = array("image1.gif", "image2.gif", "image3.gif");
srand ((double)microtime()*1000000);
shuffle($imgs);
?>

...
<div style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat">
...



le tout est de savoir à quel objet (div, span, ...) est attribué le style .header pour le surcharger

voilà ovilà

[message édité le 24-09-2008 @ 14:38 Par Koyote]

- Haut de page -
Mzr



 






Message du 24-09-2008 @ 15:37

Bon, je vais étudier ça, pour tout te dire, c'est pour changer le header de ma gallerie coppermine ... L'image est placé par le CSS, d'où ma question.
- Haut de page -
Koyote



 






Message du 24-09-2008 @ 15:42

En fait plutôt que de placer l'image via la css il faut la placer directement dans la page php via un style toujours (un css local quoi)
- Haut de page -
Mzr



 






Message du 24-09-2008 @ 15:45

Ouais, ba ça va se compliqué vu mes compétences en dev web ...
- Haut de page -
Koyote



 






Message du 24-09-2008 @ 15:51

ben je t'ai donné le code plus haut :-)

tu cherches dans ta page .php la balise qui contient les mots "class=header" et mets dans cette balise
Code :

class="header" style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat">



sachant qu'un peu plus haut dans la page tu as écrit ce le script qui permet de faire un schuffle sur les images du tableau

- Haut de page -
Mzr



 






Message du 24-09-2008 @ 15:56

Oki, j'ai bien trouvé ma class dans le fichier main. Sauf que ce fichier est un HTML ...

Va falloir passer en javascript ??
- Haut de page -
Koyote



 






Message du 24-09-2008 @ 16:04

html ? tiens étrange pour du coppermine...
ben oui alors une fonction javascript qui va retourner aléatoirement l'url d'une image puis attribuer cette image au style de la partie concernée.
Mais là il va falloir l'id de la zone à laquelle s'applique le class="header" genre document.getElementById("idDuTruc").style.backgroundImage = 'url(adresse de l'image)'

- Haut de page -
Mzr



 






Message du 24-09-2008 @ 17:27

Bon, je viens de virer les différents DIV qui me gênait (impossible de mettre l'image voulu en arrière plan) et je suis donc repassé sur de bons vieux tableaux !

Maintenant, impossible de lui faire manger mon image aléatoire dans le background du tableau :(

Il n'accepte pas que je lui mette :

Code :

<script language="JavaScript">
banniere();
</SCRIPT>



dans le champ image background du tableau ... Il m'affiche "banniere();"

Comment faire ?

[message édité le 24-09-2008 @ 17:30 Par Mzr]
- Haut de page -
Koyote



 






Message du 25-09-2008 @ 9:44

heu ben là comme ça pas facile de répondre... si tu as un lien vers la page en question histoire de voir le source en entier ce sera plus facile :-)
- Haut de page -
Mzr



 






Message du 25-09-2008 @ 10:49

Tout de suite :

http://fotodoto.online.fr/index.php
- Haut de page -
Koyote



 






Message du 25-09-2008 @ 11:07

Sur ton index.php ajoute le code suivant :
Code :

<?php
$imgs = array("image1.gif", "image2.gif", "image3.gif");
srand ((double)microtime()*1000000);
shuffle($imgs);
?>


puis
Code :


<script LANGUAGE="JavaScript">
function changeFond() {
document.getElementById("maTableHeader").style.backgroundImage='url(<?php echo $imgs[0]?>)'
}
</script>


puis ceci :
Code :


<body onload="changeFond()">


et enfin dans la page où est décrit ton tableau il faut rajouter
Code :


<table width="860" height="143" id="maTableHeader">



c'est pas super propre mais ça marche
voilà ovilà

- Haut de page -
Mzr



 






Message du 25-09-2008 @ 11:48

Nikel, parfait, merci beaucoup !

J'ai un peu bouffer ce code sans trop comprendre, mais bon ...

Le dev, c'est pas tellement mon domaine ...

Si tu as une astuce pour accélérer le traitement, ça serait nikel, car le header met un peu plus de temps à charger :D
- Haut de page -
Torasme



 






Message du 25-09-2008 @ 12:09

Bah là, je dirais que ça vient plutôt de l'hébergeur... Free n'est vraiment pas terrible en matière d'hébergement :(
Le peu de choses que j'ai hébergé sur mon compte Free, je trouvais ça horriblement lent... Et dès que tu commences à faire gonfler une base de données, c'est la cata...
- Haut de page -
Koyote



 






Message du 25-09-2008 @ 12:47

bah là le problème c'est que le chargement du background se fait en décalé.. il faudrait intervenir un peu avant mais sans le source au complet c'est plus dur :)
Déjà ça marche, c'est pas si pire ;)

- Haut de page -
Mzr



 






Message du 25-09-2008 @ 13:40

Sure !

Encore merci Koyote pour cette affaire rondemant mennée :)

Et pour free, ouais, c'est gratuit et pas excellent, mais ça reste plus que correct.
- Haut de page -
Koyote



 






Message du 25-09-2008 @ 13:48

de rien :D
- Haut de page -
roccolechat



 






Message du 26-09-2008 @ 11:57

Mzr a écrit

Sure !

Encore merci Koyote pour cette affaire rondemant mennée :)

Et pour free, ouais, c'est gratuit et pas excellent, mais ça reste plus que correct.



C'est pour cela que je suis passé en galeries web sans base de données, Coppermine était super lent chez moi ( free.fr ). Dommage, parce que ce script est rudement complet en termes de personnalisation et gestion des utilisateurs.
- Haut de page -
Mzr



 






Message du 26-09-2008 @ 12:02

Je savais bien que j'allais voir DonSpliff ici :)

Oui, mais pour moi, ça reste un script vraiment puissant, gratuit et qui répond très bien à ma demande.

Tu as des photos, tu les upload via FTP, et coppermine s'occupe du reste.
- Haut de page -
roccolechat



 






Message du 26-09-2008 @ 22:41

Je ne dis que du bien de Coppermine. Mais comme j'utilise principalement mes espaces free.fr pour mettre en ligne mes galeries, je ne peux utiliser Coppermine :(

Alors, j'ai un bête script qui fait l'affaire, avec un .htaccess. Crois moi que si Free était véloce sur ses bases de données, je me ferais un plaisir de remettre CPG ;)
- Haut de page -
Mzr



 






Message du 02-03-2011 @ 15:28

Bon, je reviens avec la même question, mais pour une autre page :D

Dans mon CSS? j'ai ceci :

Code :

.headerbar {
   background: #FFFFFF url("{T_THEME_PATH}/images/header_bg.gif") no-repeat 50% 0;



Je voudrais rendre cette image aléatoire.

En parcourant le web, j'ai vu la possibilité de mettre une page php à la place de mon image, et on traiterait la fonction aléatoire dans cette page php.

J'ai tenté de faire afficher un echo img src avec mon image aléatouire (tout fonctionne) mais mon CSS ne veut visiblement pas l'accepter.

Mon echo img src ne serait pas bon pour le CSS ?

[message édité le 02-03-2011 @ 15:28 Par Mzr]
- Haut de page -
icy



 






Message du 02-03-2011 @ 15:44

fait un javascript qui modifie la properties style du tag voulu.
- Haut de page -
Mzr



 






Message du 02-03-2011 @ 15:53

Fallait simplement jouer avec le header des pages PHP et non pas faire des echos ...

Code :

<?php
// Vous voulez afficher un gif
header('Content-type: application/gif');

// Il sera nommé downloaded.gif
header('Content-Disposition: attachment; filename="Banniere.gif"');

// Le source du gif header_bg1.gif
readfile('xxx/header_bg1.gif');
?>



Edit : Mon histoire de modifier le header de la page PHP fonctionne mais l'image n'est visiblement pas mise en cache et est traité en dernier ...

Le souci du javascript, c'est que j'ai pas mal de pages qui font appel à mon CSS. Le plus simple serait de pouvoir gérer ce random directement dans le CSS ou dans un fichier à part, mais pas sur toutes les pages qui font appel au CSS.

Bon, j'ai trouvé une fonction qui était inclus dans mon script, donc tout est bon !

[message édité le 02-03-2011 @ 20:44 Par Mzr]
- Haut de page -

Plan du forum | Contacter l'administrateur

Powered by SoulBB 3.0.1
© Soulmanto, 2003-2010

Valid XHTML 1.0 Transitional

Page générée en 0.041 secondes