Modifier les images New, No New via Javascript sur une base jour/nuit ou 4-saisons

[Luirio]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum : http://littlenightmare.kanak.fr/

Description du problème

Coucou. J'ai fouillé le net avant d'atterrir ici pour vous demandez de l'aide. Voilà, j'aimerais faire en sorte que les images no-new, new et lock affichent deux images différentes selon l'heure de la journée (par exemple sur un thème jour un soleil apparait pour montrer un nouveau message alors que de nuit, c'est un croissant de lune qui apparaît à la place.)

Ne voulant pas passer ma page à blanc, je veux savoir ce qui cloche dans mon code.

Voici le code de mon index-box:

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
                  <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<div class="modifcat colorstyle2">
<!-- BEGIN catrow --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <div class="cattitre">{catrow.cathead.CAT_TITLE}</div>
 </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td>
                 
                    <img class="imgmess" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                 
          </td>
                  <h1 class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </h1>
          <td>
 <div class="liensfrm">
                          {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        </div>
          </td>
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
                  <div class="descfrm">{catrow.forumrow.FORUM_DESC}</div>
        </td>
                  <td class="row3 over" align="center" valign="middle">
                    <div class="avatarfrm">
                    <!-- BEGIN avatar -->
                      {catrow.forumrow.avatar.LAST_POST_AVATAR}
                  <!-- END avatar -->
                    </div>
                  </td>
          <td class="row3" align="center" valign="middle">
                  <div class="derniermess">
                    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets<br />
                    {catrow.forumrow.LAST_POST}
                  </div>
          </td>
  </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
  </table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Et voici le Javascript sur lequel je travail:

Code:

jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 20){
          $(".chatboxbackground").css("background-color", "#f7e393");
          $(".chatboxbackground").css("background-image", "url('https://i.servimg.com/u/f85/13/67/50/14/cbback19.png')");
          $(".chatboxbackground").css("box-shadow", "0px 0px 5px 5px rgba(222, 188, 107, 1)");
          $(".cattitre").css("color", "#000000");
          $(".cattitre").css("background-color", "#fcd0ec");
          $(".cattitre").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".derniermess").css("background-color", "#fcd0ec");
          $(".derniermess").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".descfrm").css("background-color", "#fcd0ec");
          $(".descfrm").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".liensfrm").css("background-color", "#fcd0ec");
          $(".liensfrm").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".imgmess").css("background-color", "#fcd0ec");
          $(".imgmess").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".partenaire").css("background-color", "#fcd0ec");
          $(".partenaire").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
        $(".bloc2").css("background-color", "#fcd0ec");
          $(".bloc2").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".contenu_onglet").css("background-color", "#fcd0ec");
          $(".contenu_onglet").css("box-shadow", "0px 0px 5px 5px rgba(244, 187, 224, 1)");
          $(".colorstyle2").css("background-color", "#f7e393");
          $(".colorstyle2").css("box-shadow", "0px 0px 5px 5px rgba(222, 188, 107, 1)");
          $(".colormain").css("background-color", "#f5f5f5");
          $(".colormain").css("box-shadow", "0px 0px 5px 5px rgba(209, 180, 215, 1)");
          $("#i_logo").css("background-image", "url('https://i.servimg.com/u/f85/13/67/50/14/die_ba12.png')");
          $("body").css("background-image", "url('http://getwallpapers.com/wallpaper/full/4/e/7/1110395-best-my-little-pony-background-1920x1080.jpg')");
          document.getElementById('ma_musique').innerHTML = '<iframe width="300" height="40" src="https://www.youtube.com/embed/vcEGFAaSpzI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' ;
 
        }else{
  $(".chatboxbackground").css("background-color", "#040317");
          $(".chatboxbackground").css("background-image", "url('https://i.servimg.com/u/f85/13/67/50/14/cbback21.png')");
          $(".chatboxbackground").css("box-shadow", "0px 0px 5px 5px rgba(75, 80, 157, 1)");
          $(".cattitre").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".cattitre").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".avatarfrm").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".avatarfrm").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".derniermess").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".derniermess").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".descfrm").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".descfrm").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".liensfrm").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".liensfrm").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".imgmess").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".imgmess").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".partenaire").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".partenaire").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
        $(".bloc2").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".bloc2").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".contenu_onglet").css("background-color", "rgb(20, 63, 160, 0.5)");
          $(".contenu_onglet").css("box-shadow", "0px 0px 5px 5px rgba(92, 58, 180, 1)");
          $(".colorstyle2").css("background-color", "#040317");
          $(".colorstyle2").css("box-shadow", "0px 0px 5px 5px rgba(75, 80, 157, 1)");
          $(".colormain").css("background-color", "#22326c");
          $(".colormain").css("box-shadow", "0px 0px 25px 25px rgba(8, 23, 56, 1)");
          $(".bloc").css("background-color", "#202340");
          $("body").css("background-image", "url('https://i.servimg.com/u/f14/18/89/95/10/night_11.png')");
          $("#i_logo").css("background-image", "url('https://i.servimg.com/u/f85/13/67/50/14/die_ba13.png')");
          document.getElementById('ma_musique').innerHTML = '<iframe width="300" height="40" src="https://www.youtube.com/embed/sruL8SNB32c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' ;
        }
});

Remarquer que je n'ai pas inclus le code pour le src car j'ignore totalement comment ça fonctionne et l'aide des gens s'est montré peu convaincante jusqu'à maintenant, d'où mon arrivé ici. Je sais que c'est possible via un selecteur de thème, mais je n'ai rien trouvé de prometteur.

[Neptunia]

Bonjour ^^

Je sais que c'est possible via un sélecteur de thème, mais je n'ai rien trouvé de prometteur.

Non, cela n'est pas possible depuis un sélecteur de thème parce qu'ils fonctionnent sur la modification des feuilles CSS. Hors on ne peut pas remplacer une image par CSS, uniquement les images de fond.

Pour changer l'attribut src d'une image, vous pouvez utiliser ce genre de code (en place et fonctionnel sur mon forum)

Code:

$('img[src="https://hebergeur.com/image_par_defaut.jpg"]').attr('src','https://hebergeur.com/image_de_remplacement.jpg');

Afin d'éviter d'entrapercevoir l'image d'origine avant son remplacement, je vous suggère de placer dans votre panneau d'administration des images vides et transparentes de la même taille que les images définitives.

[Luirio]

OH MON DIEU! MERCI!!! T'as pas idée combien de temps j'ai cherché!