images aléatoires - modification de templates

[Releeshan]

Bonjour à tous,

En cherchant sur ce forum, j'ai trouvé un code pour faire apparaître des images aléatoires. Voici le code :

Spoiler:

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.

[tupac]

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

[Releeshan]

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.

[tupac]

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

[Releeshan]

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

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

[tupac]

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)

[Releeshan]

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/

[tupac]

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?

[Releeshan]

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 ?

[tupac]

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:

[Releeshan]

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

[tupac]

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>