images aléatoires - modification de templates

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu images aléatoires - modification de templates

Message par Releeshan le Ven 30 Sep 2011 - 0:21

Bonjour à tous,

En cherchant sur ce forum, j'ai trouvé un code pour faire apparaître des images aléatoires. Voici le code :
Spoiler:
Code:
<script type="text/javascript">
 
var banner = new Array();
 
banner.push('http://adresse_image_1');
banner.push('http://adresse_image_2');
banner.push('http://adresse_image_3');
 
document.getElementById('i_whosonline').src= banner[Math.floor(Math.random()*banner.length)];
 
</script>
Le sujet où je l'ai trouvé avait pour but de faire apparaître une image aléatoire du "Qui est là ?".

En ce qui me concerne, c'est dans l'index_body que j'aimerais l'insérer. J'aimerais que les images aléatoires apparaissent au-dessus de la présentation du staff et des joueurs sur mon forum Telvalto. Mais lorsque j'insère le code des images aléatoires indiqué ci-dessus avant le code de la présentation, seule la présentation du staff et des joueurs apparaît.

Comment dois-je modifier le code pour faire apparaître des images aléatoires dans le index_body ?

Merci d'avance à ceux qui répondront.

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Sam 1 Oct 2011 - 6:15

Bonjour

Je vous propose ce code,placer a l'intérieur des images de préférence de même dimension.

Code:
<SCRIPT language="JavaScript" title="G1SCRIPT">

var specifyimage=new Array() //Your images
specifyimage[0]=" votre image ici "
specifyimage[1]=" votre image ici "
specifyimage[2]=" votre image ici "
specifyimage[3]=" votre image ici "
var delay=3000 //3 seconds

//Counter for array
var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
//Identifiant du script: 65
//Mis en ligne: 26/09/02
//By TANGUY
</SCRIPT>
<img src="http://hariboow.free.fr/upload/images/1717damim.jpg" name="cube"  border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par Releeshan le Sam 1 Oct 2011 - 9:56

Merci tupac pour ta réponse. Malheureusement, cela semble ne pas fonctionner. Voilà ce que ça donne :


A chaque " votre image ici ", j'ai mis l'adresse de la mienne. Pourtant, elles n'apparaissent pas. En revanche, l'image sur tes trois dernières lignes de code apparaît.

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Sam 1 Oct 2011 - 20:24

J'ai testé le code sur mon forum et il fonctionne,j'ai laissé mes images a l'intérieur,placez le telle quel dans votre page d'accueil pour voir s'il fonctionne se sera ensuite a vous de placer vos propres images.
Au début du code il vous faudra placer vos images et bien prenez la dernière de la liste et placez-la tout en bas du code a l'endroit prévus a cet effet.

Code:
<SCRIPT language="JavaScript" title="G1SCRIPT">

var specifyimage=new Array() //Your images
specifyimage[0]="http://hariboow.free.fr/upload/images/1717damim.jpg"
specifyimage[1]="http://hariboow.free.fr/upload/images/2pac20wzw.jpg"
specifyimage[2]="http://hariboow.free.fr/upload/images/42232pdvd.jpg"
specifyimage[3]="http://hariboow.free.fr/upload/images/120101eqe.jpg"
var delay=3000 //3 seconds

//Counter for array
var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
//Identifiant du script: 65
//Mis en ligne: 26/09/02
//By TANGUY
</SCRIPT>
<img src="http://hariboow.free.fr/upload/images/1717damim.jpg" name="cube"  border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par Releeshan le Dim 2 Oct 2011 - 10:13

J'ai mis votre script au tout début de Index_body, mais rien à faire, c'est toujours la même image qui apparaît sur le forum : celle de la dernière image, tout en bas de votre script. J'ai essayé avec les navigateurs google chrome et Firefox, aucune différence. Voyez vous-même sur mon forum de test : http://testenfolie.forumactif.com/. Au moins, l'image est au bon endroit Wink

Peut-être n'est-il pas placé au bon endroit dans le template ? Ou qu'il manque un code CSS ? A vrai dire, je n'y connais pas grand chose...

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Dim 2 Oct 2011 - 17:22

Bonjour

Le code ne fonctionne pas les templates.
Pourquoi ne pas le placer dans votre page d'accueil puisque vous voulez qu'il apparaisse au dessus de (STAFF)

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par Releeshan le Dim 2 Oct 2011 - 20:56

puisque vous voulez qu'il apparaisse au dessus de (STAFF)
Justement, en plaçant le code dans la page d'accueil, la présentation du Staff se trouve au-dessus des images aléatoires. C'est le contraire que je souhaite. Dans la mesure où il n'y aura pas que ces images, mais également la présentation du forum lui-même, ça m'embête.

Le code pour le Staff se trouve dans l'index_body, raison pour laquelle je voulais mettre le code des images aléatoires dans ce template, au-dessus du code du Staff. Mais pour le Staff, il y a également un code CSS, alors peut-être en faut-il un aussi pour les images aléatoires ?

Dans tous les cas, même si le code est inséré dans la page d'accueil, il y a toujours la même image fixe : http://testenfolie.forumactif.com/

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Dim 2 Oct 2011 - 21:12

Je suis allez sur votre forum et le code fonctionne très bien il vous suffi juste de l'entourer d'un ( center ) pour qu'il soit au dessus du staff.


Par contre il y a toujours une deuxième image plus bas.

Avez-vous retiré le code du template?

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par Releeshan le Lun 3 Oct 2011 - 22:04

J'ai demandé à des copains de regarder et un seul voit les images changer alors qu'on a tous le même navigateur et la même version. Alors là, je vois pas pourquoi pour certains ça marche et pas pour d'autres. Pour autant que je sache, le fonctionnement dépend du navigateur, non ? Je ne comprends pas.

En tout cas, je te remercie pour ton aide, Tupac.

Comment faire, maintenant, pour que ça marche pour tout le monde ?

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Lun 3 Oct 2011 - 23:02

Bonsoir

Bon essayons avec un autre code.
Placer le contenu suivant dans votre page d'accueil,j'ai laissé les images de l'exemple a vous de placer les vôtres.

Code:

<style>

#imageContainer {
   position:relative;
   height:200px;      /* hauteur  image  */
   width:300px;        /* largeur image */
}

#imageContainer img {
   display:none;
   position:absolute;
}
</style>

  <div id="imageContainer">
   <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg" width="300" height="200" alt="" />
   <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg" width="300" height="200" alt="" />
   <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg" width="300" height="200" alt="" />
   <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg" width="300" height="200" alt="" />
   <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg" width="300" height="200" alt="" />
  </div>

Et pour finir la partie JavaScript.
Donc faite comme ceci => Panneau d'administration => Modules => Gestion des codes JavaScript => Créer un nouveau JavaScript => Placer un titre puis cocher ( sur toutes les pages ) placer le code suivant et valider.

Spoiler:
Code:
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
   if(!d.getElementById || !d.createElement)return;

   // DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
   // http://slayeroffice.com/code/imageCrossFade/xfade2.css
   css = d.createElement("link");
   css.setAttribute("href","xfade2.css");
   css.setAttribute("rel","stylesheet");
   css.setAttribute("type","text/css");
   d.getElementsByTagName("head")[0].appendChild(css);

   imgs = d.getElementById("imageContainer").getElementsByTagName("img");
   for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
   imgs[0].style.display = "block";
   imgs[0].xOpacity = .99;
   
   setTimeout(so_xfade,2000);
}

function so_xfade() {
   cOpacity = imgs[current].xOpacity;
   nIndex = imgs[current+1]?current+1:0;

   nOpacity = imgs[nIndex].xOpacity;
   
   cOpacity-=.05;
   nOpacity+=.05;
   
   imgs[nIndex].style.display = "block";
   imgs[current].xOpacity = cOpacity;
   imgs[nIndex].xOpacity = nOpacity;
   
   setOpacity(imgs[current]);
   setOpacity(imgs[nIndex]);
   
   if(cOpacity<=0) {
      imgs[current].style.display = "none";
      current = nIndex;
      setTimeout(so_xfade,2000);
   } else {
      setTimeout(so_xfade,50);
   }
   
   function setOpacity(obj) {
      if(obj.xOpacity>.99) {
         obj.xOpacity = .99;
         return;
      }
      obj.style.opacity = obj.xOpacity;
      obj.style.MozOpacity = obj.xOpacity;
      obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
   }
   
}

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par Releeshan le Lun 3 Oct 2011 - 23:10

Ca fonctionne, super ! Bon ce n'est plus aléatoire, mais tant pis. Merci encore, Tupac.

Releeshan
*

Féminin
Messages : 43
Inscrit(e) le : 05/11/2009

http://releeshan.forumactif.com
Releeshan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: images aléatoires - modification de templates

Message par tupac le Lun 3 Oct 2011 - 23:58

Vous pouvez si vous le souhaité placer un lien sur chaque image en faisant comme ceci.

Code:
  <div id="imageContainer">
   <a href=" url ici "><img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg" width="300" height="200" alt="" /></a>
   <a href=" url ici "><img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg" width="300" height="200" alt="" /></a>
   <a href=" url ici "><img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg" width="300" height="200" alt="" /></a>
   <a href=" url ici "><img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg" width="300" height="200" alt="" /></a>
   <a href=" url ici "><img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg" width="300" height="200" alt="" /></a>
  </div>

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum