le MEMO du WEB développeur
 

••• Gestion des images sur son site Web •••   Liste des Mémos, astuces et bonnes pratiques

Modifier l'attribut src d'une image avec JQuery - JQuery
Parcourir les images d'un répertoire en PHP - PHP
Apparition d'un élément en fondu avec JQuery sur le survol de souris - JQuery
Défilement continu horizontal ou vertical d'une bande d'images en javascript - Javascript

Afficher une image différente selon la date de l'année en javascript - JQuery

Ce script javascript permet d'afficher une image de background différente selon les saisons à l'élément d'identifiant id="monimage"

L'idée est d'analyser la date courante afin de déterminer la saison en utilisant l'objet new Date(année, mois, jour)

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

 

publié le 08/08/2012 par Memo Web
AstuceDatesImages
Commentaire :
Bonsoir,merci pour le script
Est-ce que c'est possible d'afficher une liste d'éléments par rapport à la date d'affichage (pour gérer les rendez-vous):je veux afficher la liste des clients attendus chaque jour
Merci
par inconnu, le 18/04/2013
Commenter le Mémo :

Créer un effet d'opacité sur le survol d'une image - Javascript
Centrer une image horizontalement - CSS
Aligner verticalement du texte avec une image - CSS
Empêcher le clic droit sur les images de votre site - Javascript
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos