affichage image entre 2 date

symbol

symbol

Membre actif
13 Octobre 2004
536
25
Bonjour

Je souhaite afficher une image entre 2 dates.

J'ai trouvé sur le net ce code que j'ai essayé d'adapter:
Bloc de code: 
<img id="Logo" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" onload="logo(this)" />

function logo(img) {
  if (img.src.indexOf('default')==-1) return; // already changed
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 12 && (Today >= 10 && Today <= 31)) {
    src = "http://kenopronos.free.fr/graph/bandeauNoel3.gif";
  } else if (Month === 01 && (Today >= 01 && Today <= 03)) {
    src = "http://kenopronos.free.fr/graph/nouvelan.png";
  }
  img.src=src;
}

Ben... ca marche pas :)

Une idée ?

Merci
 
Tu devrais peut-être essayer avec un "id" bien différent du nom de la fonction, et pas seulement une majuscule de différence.
De plus les mois (variables) se comptent de 0 à 11 et pas de 1 à 12 (source). Et pas de 01, 02, 03... pour les jours mais 1, 2, 3... (source).

En reprenant le code d'origine et en ne réduisant pas, j'aurai tenté ça comme code :
Bloc de code: 
<img id="Logo1" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" onload="logo(this)" />

function logo(img) {
  if (img.src.indexOf('default')==-1) return; // already changed
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if ((Month === 11 && Today >= 10) || (Month === 11 && Today <= 31)) {
    src = "http://kenopronos.free.fr/graph/bandeauNoel3.gif";
  } else if ((Month === 0 && Today >= 1) || (Month === 0 && Today <= 3)) {
    src = "http://kenopronos.free.fr/graph/nouvelan.png";
  }
  alert(src);
  img.src=src;
}

Elles sont jolies tes guirlandes :)
 
Dernière édition:
Merci de ta réponse.

Et hop ! un copier coller et je vois ce que ca donne :)

"Elles sont jolies tes guirlandes" ... Si tu voyais les boules :D

MAJ :

Comment peut on afficher 3 fois la meme image cote a cote et centrer ?
actuellement ca donne :
Capture-d-e-cran-2018-12-12-a-10-00-30.png


Merci
 
Dernière édition:
Tu peux encapsuler tout dans une DIV pour tout centrer, comme :
Bloc de code: 
<div align="center"></div>

Ou encapsuler l'image dans une balise <p></p> :
Bloc de code: 
<p align="center"><img id="Logo1" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" onload="logo(this)" /></p>

Ou tu appliques ce que tu as fait pour centrer la date et le compte à rebours.
 
Dernière édition:
  • J’aime
Réactions: symbol
Me revoila...

Quand je change la date du mac (je met le mois octobre) j'ai quand meme la déco de noel :(

Y'a un souci dans le code
 
Bon je mis suis collé plus sérieusement en faisant des variations et les validant sur mon serveur et le code ci-dessous fonctionne. Je l'ai testé en changeant les dates pour faire apparaitre la guirlande du premier de l'an :
Bloc de code: 
<div align="center"><img id="logo" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" alt="logonnoel" onload="logo(this)" />
<script type="text/javascript">
    function logo(img) {
  //if (img.src.indexOf('default')==-1) return; // already changed
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 11 && (Today >= 10 && Today <= 31)) {
    src = "http://kenopronos.free.fr/graph/bandeauNoel3.gif";
  } else if (Month === 1 && (Today >= 1 && Today <= 3)) {
    src = "http://kenopronos.free.fr/graph/nouvelan.png";
  }
  img.src=src;
}
</script>
 
Dernière édition:
Y'avait une petite erreur, le mois n'etait pas

Bloc de code: 
  } else if (Month === 1 && (Today >= 1 && Today <= 3)) {

mais

Bloc de code: 
  } else if (Month === 0 && (Today >= 1 && Today <= 3)) {

Et
Bloc de code: 
alt="logonnoel"
J'ai remplacé par
Bloc de code: 
alt=""
sinon ca affichage "logonnoel" quand les images n'etaient pas la.

Je me demande comment on peut compter un mois commencant par "0", la logique veut "1" . C'est débile.

Merci :)
 
Dernière édition:
Dernier petit souci.

Depuis j'ai inclus le code dans la zone HTML du forum, il y une chose qui se produit.

La ligne "analyse de 'historique : Résultats dans 30 secondes" est prévue pour disparait au bout de 30 sec.
Mais comme tu le vois , elle reste.

Une idée du problème ?

Capture-d-e-cran-2018-12-14-a-11-21-50.png


Le code qui gère l'affiche/retrait du message est
Bloc de code: 
<!--  affiche le message  "Analyse des combinaisons de l'historique : Affichage dans 30 secondes"  (pendant 30 secondes) -->
<SCRIPT language="JavaScript">
function cacherDiv() {
     document.getElementById("test").style.visibility = "hidden";
}
</SCRIPT>


<body onload="setTimeout(cacherDiv,38000);">
<div id="test">Analyse des combinaisons de l'historique :<b> Résultats dans 30 secondes</b></div>

</div>
 
Bon j'ai fait les tests chez moi avec les 2 fonctions, et les 2 fonctionnent (c'est coule quand une fonction fonctionne :D).
Je te mets mon code qui fonctionne pour le test (attention les dates sont mises pour le test et voir la guirlande du nouvel an) :
Bloc de code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script type="text/javascript">
function cacherDiv() {
     document.getElementById("test").style.visibility = "hidden";
}
function logo(img) {
  //if (img.src.indexOf('default')==-1) return; // already changed
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 11 && (Today >= 10 && Today <= 11)) {
    src = "http://kenopronos.free.fr/graph/bandeauNoel3.gif";
  } else if (Month === 11 && (Today >= 12 && Today <= 31)) {
    src = "http://kenopronos.free.fr/graph/nouvelan.png";
  }
  img.src=src;
}
</script>
</head>

<body onload="setTimeout(cacherDiv,38000);">
<div align="center"><img id="logo" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" alt="" onload="logo(this)" />
    </div>
    <div id="test">Analyse des combinaisons de l'historique :<b> Résultats dans 30 secondes</b></div>

</div>
</body>
</html>

EDIT : Ca fonctionne bien sous Safari, mais pas Firefox, ni Opera !?
Sous Firefox et Opéra on dirait qu'ils chargent indéfiniment la page.
 
Dernière édition:
"Sous Firefox et Opéra on dirait qu'ils chargent indéfiniment la page."

exact . Why ????? Au nom de la France !!! WHY ????

Quand je colle ton code (celui du dessus), le message "analyse.... 30 secondes" s'efface toujours pas.

ca donne :

Capture-d-e-cran-2018-12-14-a-12-37-31.png


Poupinou, si je te créé un code admin, tu veux venir jeter un oeil a tous le HTML qui se trouve dans la ZONE HTML du forum ?
 
Dernière édition:
En fait, si on change la date pour que les bandeaux ne soient PAS affichés, la phrase " analyse.... 30 secondes" s'efface correctement.

Le probleme survient uniquement quand les bandeaux sont physiquement visibles :-/

Le problème c'est quoi ? une histoire de plan (1er plan, 2e plan..) ??
 
Je retire le code que tu m'a filé pouppinou, ca ne cause que des problemes.

La page est rechargée sans fin. On le voit car les anmations effets flash vont 4 fois trop vite.

Je suis décu.
 
Dernière édition:
Bon Pouppinou, restons positifs

Le code fourni avant , ne fonctionne pas, on se sait pas pourquoi.

J'ai trouvé ce nouveau code.
Peux tu l'adapter afin qu'il fonctionne tel que l'autre ?

Merci

Bloc de code: 
<script>
  $(function() {
    var today = new Date();
    var ladate=Date.parse(today);
    var lannee = today.getFullYear();
    var dateprintemps  =Date.parse(new Date(lannee, 2, 21));
    var dateete        =Date.parse(new Date(lannee, 5, 21));
    var dateautomne    =Date.parse(new Date(lannee, 8, 21));
    var datehiver      =Date.parse(new Date(lannee, 11, 21));
    if(ladate>=dateprintemps && ladate<dateete){
      $("#monimage").css({backgroundImage: "url('img/Fond-Printemps.png')"}); }
    else if(ladate>=dateete && ladate<dateautomne){
      $("#monimage").css({backgroundImage: "url('img/Fond-Ete.png')"});  }
    else if(ladate>=dateautomne && ladate<datehiver){
      $("#monimage").css({backgroundImage: "url('img/Fond-Automne.png')"});  }
    else if(ladate>=datehiver || ladate<dateprintemps){
      $("#monimage").css({backgroundImage: "url('img/Fond-Hiver.png')"});  }
});
</script>
 
J'ai modifié comme j'ai pu des lignes :

Bloc de code: 
<script>
  $(function() {
    var today = new Date();
    var ladate=Date.parse(today);
    var lannee = today.getFullYear();
  
    var datenoel  =Date.parse(new Date(lannee, 12, 05));
    var datefinnoel        =Date.parse(new Date(lannee, 12, 31));
    var datenouvelan    =Date.parse(new Date(lannee, 1, 01));
    var datefinnouvelan      =Date.parse(new Date(lannee, 1, 05));
  
    if(ladate>=datenoel && ladate<datefinnoel){
      $("#monimage").css({backgroundImage: "url('http://kenopronos.free.fr/graph/bandeauNoel3.gif')"}); }
    
    else if(ladate>=datenouvelan && ladate<datefinnouvelan){
      $("#monimage").css({backgroundImage: "url('http://kenopronos.free.fr/graph/nouvelan.png')"});  }

});
</script>

par contre je sais pas modifier ca
Bloc de code: 
   $("#monimage").css({backgroundImage:
 
Ton script ne fonctionne pas. Où l'as tu trouvé ?

J'ai remplacé ton code javascript pour les résultats dans 30 secondes.
Et tout fonctionne, image de nouvel an et résultats dans 30 secondes. Testé dans Safari, Opera et Firefox.
J'ai mis une date pour voir apparaitre la guirlande du nouvel an et j'ai mis 2 secondes pour que la phrase "Résultats dans 30 secondes" s'efface.
Bloc de code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>

    <!--APPEL JS angulaire.min.js POUR SCRIPT EFFACER LA PHRASE "Analyse des combinaisons de l'historique: Résultats dans 30 secondes"-->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 
    <!--SCRIPT POUR CHANGEMENT IMAGE NOEL/NOUVEL AN-->
 
<script type="text/javascript">
function logo(img) {
  //if (img.src.indexOf('default')==-1) return; // already changed
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 11 && (Today >= 10 && Today <= 11)) {
    src = "http://kenopronos.free.fr/graph/bandeauNoel3.gif";
  } else if (Month === 11 && (Today >= 12 && Today <= 31)) {
    src = "http://kenopronos.free.fr/graph/nouvelan.png";
  }
  img.src=src;
}
</script>
 
    <!--SCRIPT POUR EFFACER LA PHRASE "Analyse des combinaisons de l'historique: Résultats dans 30 secondes"-->
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($timeout) {
  $timeout(function cacherDiv() {
     document.getElementById("test").style.visibility = "hidden";
  }, 2000); /* TEMPS A CHANGER POUR FAIRE 30 SECONDES PAR 30000*/
});
</script>
</head>

<body>
    <div align="center"><img id="logo" src="http://kenopronos.free.fr/graph/bandeauNoel3.gif" alt="logonnoel" onload="logo(this)" />
    </div>
 
    <div ng-app="myApp" ng-controller="myCtrl"><div id="test">Analyse des combinaisons de l'historique :<b> Résultats dans 30 secondes</b></div></div>

</div>
</body>
</html>
 
Dernière édition:
Je reviens pour rendre compte .

Une fois le code placé dans a zone HTML du forum ca donne visuellement
Capture-d-e-cran-2018-12-15-a-09-51-06.png


ou

Capture-d-e-cran-2018-12-15-a-09-53-13.png


Je crois que le problème vient que je place mal ton code dans la zone HTML.

Voici le contenu de la ZONE HTML.
Voudrais tu y placer correctement ton code, et me renvoyer le tout ?
Merci
https://workupload.com/file/Kaw95bpA

Ps : c'est surement bordelique, non standard, enfin.... n'importe quoi :)

Toute personne qui souhaite participer/améliorer/modifier le code de ce projet est la bienvenue.
 
Dernière édition:

Sujets similaires

M
JS: getElementById et &nbsp;
Réponses
6
Affichages
3K
Développement web
Membre supprimé 2
M
Haut Bas