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

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


Auteur
Sujet : Image aléatoire dans CSS
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 11-02-2008 @ 21:53      Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   


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 ?
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
B2000
Administrateur
Membre # 185

 Avatar du membre
Lieu : France/Poitiers/juste à côté...

Messages :
9757 (1.52 par jour)




Message du 12-02-2008 @ 9:11   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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
----------
Intel i5 2500K | Noctua NH-U12S | Asus P8P67 Pro Rev3.1 | 2x HyperX Fury 8Go DDR3-1866MHz CAS 10 | PNY GeForce GTX 1060 XLR8 OC 6 Go | Sandisk Ultra Plus 256Go | Sony AD-7280S | Logitech QuickCam Pro 5000 | Microsoft Natural Ergonomic 4000 | Roccat Kova | SteelSeries QcK | Corsair Gaming Void USB | iiyama ProLite E2472HDD
Lenovo T430s : i5 3320m / 2x8Go / SAMSUNG 840 Pro 512Go / station Mini Dock serie 3 / LG 34um95 3440x1440 34" / SAMSUNG SyncMaster SA450 1920x1200 24"/ Clavier Lenovo Ultraslim sans fil / Souris Logitech MX Anywhere 2
Nexus 6 64Go Android 7.1.1 | Garmin Forerunner 305 | Nikon COOLPIX S9200 + Transcend SDHC 8GB | Canon PIXMA IP4850 | ADSL neufbox de SFR
Pour dialoguer en live, le chat TTH ou par mIRC sur irc://porsche.webchat.org:6667/tt-hardware
Rejoignez la team EBuyClub TTH !!!
Un jour j'ai mangé une pomme...
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 24-09-2008 @ 13:34   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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 !
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 24-09-2008 @ 14:37   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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]

----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 24-09-2008 @ 15:37   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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.
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 24-09-2008 @ 15:42   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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)
----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 24-09-2008 @ 15:45   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

Ouais, ba ça va se compliqué vu mes compétences en dev web ...
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 24-09-2008 @ 15:51   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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

----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 24-09-2008 @ 15:56   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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

Va falloir passer en javascript ??
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 24-09-2008 @ 16:04   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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)'

----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 24-09-2008 @ 17:27   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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]
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 25-09-2008 @ 9:44   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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 :-)
----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 25-09-2008 @ 10:49   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

Tout de suite :

http://fotodoto.online.fr/index.php
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 25-09-2008 @ 11:07   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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à

----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 25-09-2008 @ 11:48   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Torasme
Sage
Membre # 21727

 Avatar du membre
Lieu : Thonon les bains

Messages :
1238 (0.27 par jour)




Message du 25-09-2008 @ 12:09   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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...
----------
Core i7 4790K + NH-U9B / MSI Z97 Gaming 5 / Gigabyte GTX 1080ti Aorus Extreme Edition / G.Skill Extreme3 Sniper 4x4Go PC17000 Cas 9 / SSD Samsung 840 evo 512Go - SSD Crucial M4 128Go - WD Blue caviar 1To / DVD-RW LG / Alim : Seasonic G-750 / Boîtier Antec P193
Windows 10 x64
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 25-09-2008 @ 12:47   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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 ;)

----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 25-09-2008 @ 13:40   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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.
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
Koyote
Avatarus Digestus
Membre # 4066

 Avatar du membre
Lieu : Tresserve

Messages :
8041 (1.41 par jour)


Score :

Message du 25-09-2008 @ 13:48   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

de rien :D
----------
Ce matin un lapin....
Intel Core I7 860 sur Asus P7P55D | 4 Go DDR3 12800 G.Skill | Sapphire 5770 VaporX | Dell 248WFP + Cine Display 20" |
| S7 Edge | Playstation 3 | EOS 350D
- Haut de page -
roccolechat
Vétéran
Membre # 2527

 Avatar du membre
Lieu : St Germain en Laye

Messages :
6769 (1.15 par jour)


Score :

Message du 26-09-2008 @ 11:57   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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.
----------
Visitez mon Panoramio. Mon FlickR
"Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 26-09-2008 @ 12:02   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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.
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
roccolechat
Vétéran
Membre # 2527

 Avatar du membre
Lieu : St Germain en Laye

Messages :
6769 (1.15 par jour)


Score :

Message du 26-09-2008 @ 22:41   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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 ;)
----------
Visitez mon Panoramio. Mon FlickR
"Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 02-03-2011 @ 15:28   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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]
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -
icy
Administrateur
Membre # 871

 Avatar du membre
Lieu : Bxl

Messages :
23212 (3.71 par jour)


Score :

Message du 02-03-2011 @ 15:44   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

fait un javascript qui modifie la properties style du tag voulu.
----------
"May He touch you with His Noodly Appendage"
- Haut de page -
Mzr
Vétéran
Membre # 2859

 Avatar du membre
Lieu : Essonne

Messages :
3532 (0.6 par jour)


Score :

Message du 02-03-2011 @ 15:53   Site personnel   Afficher le profil   Envoyer un message privé   Editer le message   Citer le message      Afficher l'adresse IP   Alerter les modérateurs   

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]
----------
http://photos.mzr.fr |http://ArgusMiniature.online.fr | http://www.auto-passion-forum.com | Miniature 1/43 | http://fotodoto.online.fr
- Haut de page -


Aller dans le forum :  

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.091 secondes