AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


208 résultats trouvés pour html

Yujoba

Qui est en ligne (groupe) - Dim 14 Mar 2010 - 15:22



Bonjour. Je vais vous proposer une astuce pour mettre des groupes sur un qui est en ligne. Je me suis aidé d'un forum de codage orienté forumactif, mais j'avais déjà trouvé comment faire avant, l'aide m'a juste donné des informations supplémentaire, comme un fond pour les groupe.

Comme je ne peut pas faire de capture d'écran (problème avec mon clavier) je vous donne un forum, ou vous pourrez voir le qui est en ligne, tel qu'il est une fois modifié.

http://mns-v2.forumactif.com/forum.htm


Pour faire cela, il faut aller dans la template Index_body, être en version phpbb2.

Mais d'abord, ce code est à ajouter dans la feuille de style CSS:
Code:

.statistiques{
border:0px;
background-image: url("[color=green]LIEN IMAGE DU HAUT[/color]");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}



Ensuite, allez dans la template Index_body, et trouvez ce morceau de la template:

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
 
    <td class="catHead" colspan="2" height="28"><span
class="cattitle"><!-- BEGIN switch_view_stats --><a
class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><!-- END
switch_view_stats -->{L_WHO_IS_ONLINE}<!-- BEGIN
switch_view_stats --></a><!-- END switch_view_stats
--></span></td>
  </tr>
  <tr>
 
  <td class="row1" rowspan="6" align="center"
valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline"
alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
  </tr>
  {L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}
  <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <tr>
      <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST} <br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
 
       
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}',
'{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->



Que vous remplacerez par

Code:
<!-- BEGIN disable_viewonline -->
<table cellspacing="2" cellpadding="2" width="900" border="0" class="statistiques">
  <tr>
<td width="15%"></td>
<td width="50%">
<br /><br /><br /><br /><br /><br /><br /><center>
<span
class="groupes"> <a href="LIEN DU GROUPE 1"><span
style="color: COULEUR DU GROUPE 1"><b>NOM DU GROUPE
1</b></span></a></span> <img
src="http://i31.tinypic.com/mugck1.jpg" />
<span
class="groupes"><a href="LIEN GROUPE 2"><span
style="color: COULEUR GROUPE 2"><b>NOM GROUPE
2</b></span></a> </span> <img
src="http://i31.tinypic.com/mugck1.jpg" />
<span
class="groupes"> <a href="LIEN GROUPE 3"><span
style="color: COULEUR GROUPE 3"><b>NOM GROUPE
3</b></span></a></span> <img
src="http://i31.tinypic.com/mugck1.jpg" />
<span
class="groupes"> <a href="LIEN GROUPE 4"><span
style="color: COULEUR GROUPE 4"><b>NOM GROUPE 4</b></span></a></span> <img
src="http://i31.tinypic.com/mugck1.jpg" />
<span
class="groupes"> <a href="LIEN GROUPE 5"><font
color="COULEUR GROUPE 5"><b>NOM GROUPE 5</b></span></a></span> <img
src="http://i31.tinypic.com/mugck1.jpg" />
<span
class="groupes"> <a href="LIEN GROUPE 6"><font
style="color: COULEUR GROUPE 6"><b>NOM GROUPE 6</b></span></a> </span><br /><br />
<span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}<br />
{NEWEST_USER}<br /><br/>
{TOTAL_USERS_ONLINE}<br/>
{LOGGED_IN_USER_LIST}</center></span><br />
<td width="5%"></td>
</tr>
</table>
 
<table border="0" cellspacing="3" cellpadding="0" width="700" align="center" style="text-align: justify">
{L_CONNECTED_MEMBERS}</table>
<img src="LIEN IMAGE DU BAS"><br />
<!-- END disable_viewonline -->



Si vous avez plus de groupe, vous n'avez qu'a rajouter ce code avant le dernier groupe:

Code:
<span
class="groupes"> <a href="LIEN GROUPE X"><span
style="color: COULEUR GROUPE X"><b>NOM GROUPE X</b></font></a></span> <img
src="http://i31.tinypic.com/mugck1.jpg" alt="Groupe1" />


En vert, c'est le lien de l'image du haut ou du bas que vous devez mettre, ce qui n'est pas obligatoire.


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
S'il y a des problèmes, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

sasukedu91

Navigation sur le côté sans les widgets - Mer 10 Mar 2010 - 21:11



Voila, si vous voulez une naviguation sur le côté et sans utiliser de widget qui déforme la page :

Vous prenez le code de la naviguation et vous le mettez dans ce code :

Code:

<table style="position: fixed; bottom: 50px; left: 0px;background-color: ;z-index:10000;"><tr><td>ICI METTEZ LES CODE DE VOTRE NAVIGUATION</td><td style="vertical-align: bottom;"><img src="" onClick="document.getElementById('chatboxpop').style.display=(this.src=='')?'block':'none';this.src=(this.src=='')?'':'';"/></td></tr></table>


Ensuite vous copiez le code juste en haut que vous aurez modifier et vous le mettez dans
"Panneau d'administration -> Affichage -> Page d'accueil -> Généralité" et vous mettez ce code

Ensuite vous allez dans "Panneau d'administration -> Affichage -> Templates -> Général"

Et dans tout les templates que je vais citer , vous mettez le code du haut que vous aurez modifier (tout en haut du template)
topics_list_box
viewtopic_body
viewforum_body


Ensuite publier et voila cheers Je vous conseil d'éssayez sur un forum test avant Sleep
Le code du haut est un remix du code "Chat Box Latéral" Donc il y a encore des restes du code en question que j'ai pas tros voulu toucher (je veux pas créez de gros bug :§(zze: )

Voili Voilou

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Denkou

ChatBox latérale (avec ou sans transition) - Mer 16 Déc 2009 - 11:21


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour, voici un code qui vous permettra de faire ceci :

Spoiler:


Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
Panneau d'administration > Affichage > Page d'accueil > Generalité

Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
Panneau d'administration > Affichage > Templates > Général > overhall_header
Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">





Puis, vous mettez le code de la chatbox à l'endroit choisi.

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/>
      </td>
    </tr>
  </table>





Pour personnaliser, vous pouvez utiliser les codes ci-bas :

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE IMAGE OUVRIR';"/>
      </td>
    </tr>
  </table>


Voilà !




Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

Voilou !

Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.

Vous avez une question ou un problème pour installer ou personnaliser ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Sparrow-style

Faire un sélecteur de thème - Mer 9 Sep 2009 - 11:48



Salut salut,

À force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le Sélecteur de Thème, en vous expliquant en deux mots comment l'utiliser.

Tout d'abord, vous devez vous rendre dans votre template Overhall_Header et vous trouvez ceci :
Code:
</head>


Juste avant, vous mettez le javascript qui fait fonctionner le code :
Code:
  <script type="text/javascript">
    //<![CDATA[
      var scheme = getCookie('template1');
   
   
      if (scheme == 'NOM THÈME #1') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #1" />');
      }
      else if (scheme == 'NOM THÈME #2') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #2" />');
      }
      else if (scheme == 'NOM THÈME #3') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #3" />');
      }
   
   
      function changeskin(change) {
        var scheme = change;
        var name = 'template1';
        var pathname = location.pathname;
        var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
        var ExpDate = new Date ();
        ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
        setCookie(name,scheme,ExpDate,myDomain);
      }
   
      function getCookie(name) {
        var cname = name + "=";
        var dc = document.cookie;
        if (dc.length > 0) {
          begin = dc.indexOf(cname);
          if (begin != -1) {
            begin += cname.length;
            end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
              return unescape(dc.substring(begin, end));
            }
          }
        return null;
      }
             
      function setCookie(name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
        ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
        ((path == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) +
        ((secure == null) ? "" : "; secure");
      }
    //]]>
  </script>



Ensuite, vous allez où vous voulez que le sélecteur soit et vous mettez le sélecteur lui-même :
Code:
        <div id="skinselector" style="margin: auto; text-align: center;">
            <form style="margin: auto; text-align: center;">
                <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                    <option> Choisir un thème </option>
                    <option value="NOM THÈME #1"> NOM THÈME #1 </option>
                    <option value="NOM THÈME #2"> NOM THÈME #2 </option>
                    <option value="NOM THÈME #3"> NOM THÈME #3 </option>
                </select>
            </form>
        </div>


Par exemple, disons que vous voulez que le sélecteur soit directement après la navigation, vous allez dans le template "Overhall_Header" et placez le code après :
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>



Utilisation :

Vous l'avez donc compris, il faut utiliser UNIQUEMENT les feuilles CSS pour donner au forum son skin, c'est là que réside la difficulté de la tâche, car mettre un code en copier coller c'est facile, mais convertir un design normalement "automatique" en CSS c'est déjà plus difficile.

Pour créer une feuille de CSS, vous pouvez vous ouvrir un bloc-note tout ce qu'il y a de plus normal et y écrire votre CSS. Puis, lorsque vous le sauvegardez, vous écrivez ".css" à la place de ".txt" comme extension.

Une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple Archive-Host.

Enfin, une fois les feuille de CSS hébergées, vous prenez le lien donné et vous pouvez le mettre dans le code du sélecteur de thème.
Les informations à modifier sont en majuscules dans le code (celui du javascript ET celui du sélecteur lui-même), donc vous ne pouvez pas les manquer Wink

C'est tout, bonne journée !

Sparrow-style

Un "Footer" (img bas de page) sur votre Forum - Mer 2 Sep 2009 - 21:28



La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.

Allez dans le panneau > Affichage > Templates > "overall_footer_end"

Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :
Code:
<div id="newbottom">
</div>


Juste avant ce bout de code :
Code:
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


(à la fin du templates donc.)


Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
Pour cela, il vous faut aller dans :
Affichage > Image & Couleurs > Couleurs > Feuille CSS


Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".
Code:
#newbottom
{
clear: both;
margin: auto;
width: 100%;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 500px;
}


Explications :
clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
margin: auto : centre l'image si elle ne fait pas toute la largeur
width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
background-image : c'est l'adresse de votre image de fond
background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
background-position: la position du fond, ici au centre
height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel


Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Kazuya

Modifier une image au survol - Sam 4 Juil 2009 - 2:23


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Voilà alors je décide de partagé une petit astuce avec vous, car je trouve qu'elle vaut le coup et qu'elle embellit vachement les forum =)

Tout d'abord, de quoi il s'agit? : C'est en fait un code, qui va permettre de changer l'image, lorsque la souris passera dessus. Ainsi, on peut donner l'illusion, sans recourir au flash, que lorsque l'on passe la souris sur une image, cette dernière se met à briller. Bien sûr, ce n'est qu'une suggestion d'utilisation, ensuite, libre à vous de vous en servir comme bon vous semble.

DANS LE CSS
Code:
/*Bouton 1 sans survol*/
#bouton1 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 1 avec survol*/
#bouton1:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;


/*Bouton 2 sans survol*/
#bouton2 {
  display: inline-block;
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;
}
/*Bouton 2 avec survol*/
#bouton2:hover {
  background:url(URL);
  width:LARGEURpx;
  height:HAUTEURpx;



SUR LA PAGE
Code:

<a id="bouton1" href="http://www.domaine.com/"></a>
<a id="bouton2" href="http://www.domaine.com/"></a>


Comment le modifier? :
1 .Placez dans l'URL de "bouton 1:" L'url de l'image non survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
2. Placez, dans L'URL de "bouton 1:hover" L'url de l'image survolée. Remplacez LARGEUR et HAUTEUR par la largeur et la hauteur de l'image sélectionnée.
3. Faites pareil pour le bouton 2 et les autres éléments si vous en avez.

À noter qu'on a utilisé des liens ici pour simuler une navigation, mais cela aurait aussi pu se faire avec une div, un span ou autres.

Voilà c'est fait!

En espérant avoir été clair et vous avoir aidé!

taki

Créer image de lien sous la navigation - Mer 27 Mai 2009 - 22:12



Bonjour,

Voici une astuce pour placer des "images liens" juste en dessous de la barre de navigation.

Allez dans le PA >> Affichage >> Templates >> General >> chercher le template "overall_header" >> cliquez sur l'engrenage.

Là, cherchez cette ligne :
Code:
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>


Et ajoutez, à la suite, ce code que vous aurez rempli au préalable :
Code:
<tr><td align="center"><a href="LIEN DIRECT DE VOTRE PAGE"><img src="LIEN DIRECT DE VOTRE IMAGE"></a></td></tr>

Laissez les " " aux bords des adresses.

Enregistrez le tout et retournez sur la page des templates. Cliquez sur publier vis-à-vis votre template (le + vert) et allez sur votre forum. Vous pouvez admirer votre beau travail !

Have Fun With That

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Soulmate!

Images aléatoires (ou rotateur d'image) - Dim 18 Jan 2009 - 14:34


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Images aléatoires (ou rotateur d'image)



Edit Responsable (Onyx) : Le sujet étant devenu désuet, l'astuce a été remplacée par celle sur les bannières de Margii et adaptée pour fonctionne pour n'importe quelle image.




Salut !

Il y eu des demandes pour un rotateur d'images , c'est à dire une insertion d'image qui change à chaque fois que la page est actualisée. Cette astuce est pour vous permettre d'atteindre ce résultat.


Étape 1


Allez où vous voulez mettre votre image aléatoire et mettez-là comme cela :
Code:
<img src="url de image de base" alt="description de l'image" id="IDIMAGE" />


url de image de base = L'url de l'image de base de votre image.
description de l'image = Description de l'image pour les personnes avec handicaps visuels.
IDIMAGE = Id de l'image qui va servir à sélectionner l'image dans le javascript.

C'est tout pour cette étape ~


Étape 2


Rendez-vous dans la gestion des javascripts :
(Panneau Administration > Modules > Gestion des javascripts)

Assurez-vous d'avoir activé vos javascript.

Créez un nouveau javascript et mettez-y un titre comme 'Image aléatoire'. Choisissez le placement "Sur toutes les pages".

Ensuite collez-y ce code :
Code:
$(function(){

  var image_aleatoire = new Array();

  image_aleatoire[0] = 'URL IMAGE 1';
  image_aleatoire[1] = 'URL IMAGE 2';


  var random = image_aleatoire[Math.floor(Math.random()*image_aleatoire.length)];

  $('#IDIMAGE').attr('src', random);
});


L'url de l'image de "image_aleatoire" 0 devra être celle de votre première image.
Quant à l'url de l'image de "image_aleatoire" 1, elle devra être votre deuxième image.
Personnellement je vous conseille de faire des images de la même taille.
Le IDIMAGE est à remplacer par l'id de l'image que vous avez installée sur votre forum/site.

Vous pouvez bien sûr rajouter des images, il vous suffit de copier ce code :
Code:
image_aleatoire[chiffre] = 'URL IMAGE';


Et de le placer en-dessous de "image_aleatoire" 1.

N'oubliez surtout pas de modifier le chiffre, si deux images ont le même chiffre entre crochets ça risquerai de ne pas marcher.
Vous pouvez bien entendu placer autant d'images que vous voulez
Enregistrez votre javascript et ce sera bon !

Enjoy!

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Ven 29 Mar 2024 - 1:58